async/await 原理及执行顺序分析

以前写了篇文《这一次，完全理解Promise原理》，剖析了Promise的相关原理,反应不错，此次把学习到的相关的知识也写下。

咱们都知道，Promise解决了回调地狱的问题，可是若是遇到复杂的业务，代码里面会包含大量的 then 函数，使得代码依然不是太容易阅读。

基于这个缘由，ES7 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的状况下使用同步代码实现异步访问资源的能力，而且使得代码逻辑更加清晰，并且还支持 try-catch 来捕获异常，很是符合人的线性思惟。

因此，要研究一下如何实现 async/await。总的来讲，async 是Generator函数的语法糖，并对Generator函数进行了改进。

Generator函数简介

Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，能够依次遍历 Generator 函数内部的每个状态，可是只有调用next方法才会遍历下一个内部状态，因此其实提供了一种能够暂停执行的函数。yield表达式就是暂停标志。

有这样一段代码：

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();
复制代码

调用及运行结果：

hw.next()// { value: 'hello', done: false }
hw.next()// { value: 'world', done: false }
hw.next()// { value: 'ending', done: true }
hw.next()// { value: undefined, done: true }
复制代码

由结果能够看出，Generator函数被调用时并不会执行，只有当调用next方法、内部指针指向该语句时才会执行，即函数能够暂停，也能够恢复执行。每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

Generator函数暂停恢复执行原理

要搞懂函数为什么能暂停和恢复，那你首先要了解协程的概念。

一个线程（或函数）执行到一半，能够暂停执行，将执行权交给另外一个线程（或函数），等到稍后收回执行权的时候，再恢复执行。这种能够并行执行、交换执行权的线程（或函数），就称为协程。

协程是一种比线程更加轻量级的存在。普通线程是抢先式的，会争夺cpu资源，而协程是合做的，能够把协程当作是跑在线程上的任务，一个线程上能够存在多个协程，可是在线程上同时只能执行一个协程。它的运行流程大体以下：

1. 协程A开始执行
2. 协程A执行到某个阶段，进入暂停，执行权转移到协程B
3. 协程B执行完成或暂停，将执行权交还A
4. 协程A恢复执行

协程遇到yield命令就暂停，等到执行权返回，再从暂停的地方继续日后执行。它的最大优势，就是代码的写法很是像同步操做，若是去除yield命令，简直如出一辙。

执行器

一般，咱们把执行生成器的代码封装成一个函数，并把这个执行生成器代码的函数称为执行器,co 模块就是一个著名的执行器。

Generator 是一个异步操做的容器。它的自动执行须要一种机制，当异步操做有告终果，可以自动交回执行权。两种方法能够作到这一点：

1. 回调函数。将异步操做包装成 Thunk 函数，在回调函数里面交回执行权。
2. Promise 对象。将异步操做包装成 Promise 对象，用then方法交回执行权。

一个基于 Promise 对象的简单自动执行器：

function run(gen){
  var g = gen();

  function next(data){
    var result = g.next(data);
    if (result.done) return result.value;
    result.value.then(function(data){
      next(data);
    });
  }

  next();
}
复制代码

咱们使用时，能够这样使用便可，

function* foo() {
    let response1 = yield fetch('https://xxx') //返回promise对象
    console.log('response1')
    console.log(response1)
    let response2 = yield fetch('https://xxx') //返回promise对象
    console.log('response2')
    console.log(response2)
}
run(foo);
复制代码

上面代码中，只要 Generator 函数还没执行到最后一步，next函数就调用自身，以此实现自动执行。经过使用生成器配合执行器，就能实现使用同步的方式写出异步代码了，这样也大大增强了代码的可读性。

async/await

ES7 中引入了 async/await，这种方式可以完全告别执行器和生成器，实现更加直观简洁的代码。根据 MDN 定义，async 是一个经过异步执行并隐式返回 Promise 做为结果的函数。能够说async 是Generator函数的语法糖，并对Generator函数进行了改进。

前文中的代码，用async实现是这样：

const foo = async () => {
    let response1 = await fetch('https://xxx') 
    console.log('response1')
    console.log(response1)
    let response2 = await fetch('https://xxx') 
    console.log('response2')
    console.log(response2)
}
复制代码

一比较就会发现，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

async函数对 Generator 函数的改进，体如今如下四点：

1. 内置执行器。Generator 函数的执行必须依靠执行器，而 async 函数自带执行器，无需手动执行 next() 方法。
2. 更好的语义。async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操做，await表示紧跟在后面的表达式须要等待结果。
3. 更广的适用性。co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，能够是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成当即 resolved 的 Promise 对象）。
4. 返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，能够直接使用 then() 方法进行调用。

这里的重点是自带了执行器，至关于把咱们要额外作的(写执行器/依赖co模块)都封装了在内部。好比：

async function fn(args) {
  // ...
}
复制代码

等同于：

function fn(args) {
  return spawn(function* () {
    // ...
  });
}

function spawn(genF) { //spawn函数就是自动执行器，跟简单版的思路是同样的，多了Promise和容错处理
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}
复制代码

async/await执行顺序

经过上面的分析，咱们知道async隐式返回 Promise 做为结果的函数,那么能够简单理解为，await后面的函数执行完毕时，await会产生一个微任务(Promise.then是微任务)。可是咱们要注意这个微任务产生的时机，它是执行完await以后，直接跳出async函数，执行其余代码(此处就是协程的运做，A暂停执行，控制权交给B)。其余代码执行完毕后，再回到async函数去执行剩下的代码，而后把await后面的代码注册到微任务队列当中。咱们来看个例子：

console.log('script start')

async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1()

setTimeout(function() {
console.log('setTimeout')
}, 0)

new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})

console.log('script end')
// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout
复制代码

分析这段代码：

• 执行代码，输出script start。
• 执行async1(),会调用async2(),而后输出async2 end,此时将会保留async1函数的上下文，而后跳出async1函数。
• 遇到setTimeout，产生一个宏任务
• 执行Promise，输出Promise。遇到then，产生第一个微任务
• 继续执行代码，输出script end
• 代码逻辑执行完毕(当前宏任务执行完毕)，开始执行当前宏任务产生的微任务队列，输出promise1，该微任务遇到then，产生一个新的微任务
• 执行产生的微任务，输出promise2,当前微任务队列执行完毕。执行权回到async1
• 执行await,实际上会产生一个promise返回，即

let promise_ = new Promise((resolve,reject){ resolve(undefined)})
复制代码

执行完成，执行await后面的语句，输出async1 end

• 最后，执行下一个宏任务，即执行setTimeout，输出setTimeout

参考资料

• 极客时间《浏览器工做原理与实践》
• 阮一峰《es6入门》

Promise资料

• 《这一次，完全理解Promise原理》

最后

• 欢迎加我微信(winty230)，拉你进技术群，长期交流学习...
• 欢迎关注「前端Q」,认真学前端，作个有专业的技术人...