async await

• es7 带来的新的语法 内部执行异步能像同步一样执行
• 是 Generator 的一个语法糖

代码示例

  async function a() {
    await fetch(xxx)
    await fetch(xxx)
    await fetch(xxx)
  }

  a().then((data) => {
      //code
  }).catch(err => {
      //code
  });

Generator

  function* a(){
    yield 1
    yield 1
    yield 1
  }

简单理解

• async 返回 promise Generator 返回 Iterator 对象
• async 语义化表示异步
• Generator 返回 Iterator 对象 手动调用 next() async 自动执行

Generator 自动执行器

  function* a(){
    yield 1
    yield 1
    yield 1
  }
  function run(gen) {
    var g = gen()
    function next(data) {
      var res = g.next(data)
      if(res.done) {
        return res.value
      } else {
        res.value.then(function(data) {
          next(data);
        })
      }
    }
    next()
  }
  run(a)

Generator 改进 升级到 async await

1. async 函数

     async function a() {
   
     }
   
     // 转换为下面的
   
   
     function a() {
       return spawn(function* () {
   
       })
     }
     function spawn(gen) {
       return new Promise((resolve, reject)=> {
         const g = gen()
         function step(nextGen) {
           var ng = nextGen()
           if(ng.done) {
           resolve(ng.value)
           } else {
             Promise.resolve(ng.value).then(function(data){
               step(function() { return gen.next(data) })
             })
           }
         }
         step(function() {
           return g.next(undefined)
         })
       })
     }
   

2. await

• 等待资源 promise 字符串等等 等待一个表达式
• 必须在 async 函数中使用 脱离 async 不能使用
• await 等于 promise.then 返回结果
• 后面跟 promise 异步执行

  await fetch('xxx')  // 模拟下  await(fetch('xxx'))
  function await(args) {
    return (onResolved, onRejected) => {
      const p = onRejected ? Promise.resolve(args).catch(onRejected).then(onResolved, onRejected)
                           : Promise.resolve(args).then(onResolved, onRejected)
      return p
    }
  }

async await 转换执行

  async function a() {
    console.log("a")
    await b()
    console.log('a-end');
  }
  async function b(){
    console.log("b")
  }
  a()
  console.log("global")

  //   a   b   global  a-end
  转换后
  function a() {
    console.log("a")
    const p = new Promise((resolve)=> {
      let res = b()
      resolve(res)
    })
    p.then(()=> {
      console.log('a-end');
    })
    return p
  }

结合浏览器事件循环

1. case 参考 case

async function a1(){
    console.log("a1 start");
    await a2()
    console.log("a1 end");
}

async function a2(){
    console.log("a2");
}

async function a3(){
    console.log("a3 start");
    await a4()
    console.log("a3 end");
}

async function a4(){
    console.log("a4");
}

console.log("开始");

setTimeout(function(){
    console.log("setTimeout1");
},0)

new Promise((resolve,reject)=>{
    console.log("Promise");
    resolve();
}).then(()=>{
    console.log("then");
})

a1();
new Promise((resolve2,reject2)=>{
    console.log("Promise2");
    resolve2();
}).then(()=>{
    console.log("then2");
})
a3();
console.log("结束");

• 整体 js 代码
• setTimeout
• setInterval

• promise.then