async/await的实现原理

1,569 阅读3分钟

为什么要引入async/await操作符?

对于js的异步编程场景,无论是使用xhr回调还是promise回调,当异步操作过多并且每个动作之间存在依赖关系(即需要串行执行)时,代码的可读性和维护性会变得很差。async/await以同步代码的形式很好地解决了这个问题。

因为async/await的底层实现使用generator和promise,所以首先要了解generator的原理。

生成器函数(generator)

function* genDemo() {
    console.log("开始执行第一段")
    yield 'generator 2'

    console.log("开始执行第二段")
    yield 'generator 2'

    console.log("开始执行第三段")
    yield 'generator 2'

    console.log("执行结束")
    return 'generator 2'
}

console.log('main 0')
let gen = genDemo()
console.log(gen.next().value)
console.log('main 1')
console.log(gen.next().value)
console.log('main 2')
console.log(gen.next().value)
console.log('main 3')
console.log(gen.next().value)
console.log('main 4')

带*号的函数就叫生成器函数,是可以暂定执行和恢复执行的。

在执行过程中,如果遇到yield关键字,函数会返回关键字后面的内容给外部,然后暂停执行。

外部可以使用next方法来恢复执行该函数。

v8是如何实现函数的执行和恢复的呢?这里需要引入协程的概念。

协程

协程是一种比线程更轻量级的存在,可以理解为是在线程上运行的任务。一个线程可以存在多个协程,但同时只能执行一个协程。如果当前执行的是A协程,要启动B协程就需要暂停A协程,把js主线程的控制权交给B协程,这样表现为A协程暂停,B协程开始执行,此时我们把A协程称为B协程的父协程。

分析上面的示例代码,执行过程如下:

  1. js主线程执行genDemo方法,生成gen协程。
  2. js主线程执行gen.next方法,此时js引擎会保存当前主线程(父协程)调用栈信息,开始执行gen协程。
  3. gen协程碰上yield关键词,会保存当前gen协程的调用栈信息,并将关键词后的内容返回给父协程,并暂定执行gen协程,恢复执行父协程(即外部代码);
  4. 后续反复执行2和3的步骤,直接主线程代码执行完。

结论:

gen协程和父协程是交替执行的,它们通过yield和next配合完成切换。

async/await

async:

async function foo() {   
 console.log(1);   
 return 2
}
var p = foo();
console.log(p);
// 1
// Promise { 2 }

从以上代码可以得知,async声明后的函数返回了一个Promise对象,状态是resolved,上述代码等价于

function foo() {   
    console.log(1);    
    return new Promise(resolve => resolve(2))
}
var p = foo();
console.log(p);

await:

async function foo() {    
    console.log(1)    
    let a = await 100    
    console.log(a)    
    console.log(2)
}
console.log(0)
foo()
console.log(3)
// 0
// 1
// 3
// 100
// 2

分析执行过程:

  1. 输出0;
  2. 主线程保存父协程调用栈信息,开始执行foo协程,输出1;
  3. 遇到await操作符,await操作符干了很多事情。
    let a = await 100;首先相当于执行了new Promise(resolve => resolve(100));
    然后将主线程控制权交给父协程,同时将该promise对象返回给父协程;
  4. 父协程调用promise对象的then方法,监控promise状态的改变。
  5. 输出3,宏任务队列执行完成;
  6. 检查微任务队列,执行promise对象的then方法回调,并将返回值传给foo协程,并执行foo协程;
  7. 输出100,输出2;
  8. 完成;