async await 的执行

async await的执行

注意：本次代码仅在 Chrome 73 下进行测试。

start

不了解 async await 的，先去看阮一峰老师的文章async 函数。

先来看一道头条的面试题，这其实是考察浏览器的 event loop.

async function async1() {

  console.log('async1 start')

  await async2()

  console.log('async1 end')

}

async function async2() {

  console.log('async2')

}

console.log('script start')

setTimeout(function () {

  console.log('setTimeout')

}, 0)

async1();

new Promise(function (resolve) {

  console.log('promise1')

  resolve()

}).then(function () {

  console.log('promise2')

})

console.log('script end')

运行结果如下：

script start

async1 start

async2

promise1

script end

async1 end

promise2

setTimeout

Event Loop 浅析

首先 js 是单线程的，所有的任务都在主线程执行，而任务又分为异步任务和同步任务。

当主线程顺序执行所有任务的时候，会执行遇到的同步任务，当遇到异步任务时，会把它推入一个额外的任务队列中，直到所有的同步任务执行完毕，才会取出任务队列中的任务执行。

console.log('同步任务1')

function test () {

  console.log('同步任务2')

}

test()

setTimeout(() => console.log('异步任务3'), 0)

console.log('同步任务4')

执行结果：

同步任务1

同步任务2

同步任务4

// 异步任务最后才执行

异步任务3

然而异步任务还分为微任务（micro-task）和宏任务（macro-task），不同的异步任务会进入不同的任务队列中，而在同步任务执行完毕后，主线程会先取出所有的微任务执行，即清空微任务队列，然后才取出一个宏任务执行，接着继续清空微任务队列，之后再取出一个宏任务执行，循环直至任务队列为空，这就是 event loop。

浏览器端的宏任务主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件；微任务主要包含：Promise、MutaionObserver(API 用来监视 DOM 变动)

console.log('同步任务1')

function test () {

  console.log('同步任务2')

}

test()

setTimeout(() => console.log('异步宏任务3'), 0)

function asyncTask () {

  return new Promise((resolve, reject)=> {

    console.log('同步任务5')

    resolve()

  })

}

asyncTask().then(() => console.log('异步微任务6'))

console.log('同步任务4')

运行结果：

同步任务1

同步任务2

同步任务5

同步任务4

// 微任务是先于宏任务的

异步微任务6

异步宏任务3

注意：promise 里面的代码是立即执行的，then 函数才是异步的。

async await的执行顺序

首先 async 是基于 promise 的，async 函数执行完毕会返回一个 promise。

async function asyncFunc () {

  return 'hhh'

}

// Promise {<resolved>: "hhh"}

console.log(asyncFunc())

注意：async 函数返回的 Promise 对象，必须等到内部所有await执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

在执行 async 函数时，碰到了 await 的话，会立即执行紧跟 await 的语句，然后把后续代码推入微任务队列（以这种形式去理解，实际执行并非如此）。

来看这一个例子：

const syn1 = () => console.log(2)

const syn2 = () => new Promise((r, j)=>r()).then(()=>console.log(3))

async function asyncFunc () {

  console.log('start')

  await console.log(1);

  await syn1()

  await syn2()

  console.log('end')

  return 7

}

setTimeout(() => console.log(5), 0)

console.log(0)

asyncFunc().then(v => console.log(v))

new Promise((r, j)=>r()).then(() => console.log(6))

console.log(4)

运行结果：

0

start

1

4

2

6

3

end

7

5

执行顺序是这样的：

首先执行 setTimeout，把函数() => console.log(5)推入异步宏任务队列，进行计时 0 毫秒（即使是 0 毫秒也是存在至少 4 毫秒的延迟的。）
```
// 伪代码

//此时异步宏任务队列

[ 0: () => console.log(5) ]
```
执行 console.log(0)，打印 0
执行 asyncFunc()，进入 asyncFunc 函数
执行 console.log('start')，打印 start
执行 await console.log(1)，打印 1

把 asyncFunc 函数后续代码推入微任务队列

//此时微任务队列

[ 0: (

    await syn1()

    await syn2()

    console.log('end')

		return 7

  )

]

执行 new Promise((r, j)=>r()).then(() => console.log(6))，把 then 中的 () => console.log(6)推入微任务队列

//此时微任务队列

[ 0: (

    await syn1()

    await syn2()

    console.log('end')

		return 7

  ),

  1: () => console.log(6)

]

执行 console.log(4)，打印 4
同步任务执行完毕，开始清空微任务队列
执行微任务 0: ( await syn1() await syn2() console.log('end') return 7 ) ，遇到 await，执行 syn1()

进入 syn1函数，执行 console.log(2)，打印 2，把后续代码推入微任务队列

//此时微任务队列

[

  0: () => console.log(6),

  1: (

    await syn2()

    console.log('end')

		return 7

  )

]

微任务队列非空，继续执行微任务0: () => console.log(6)，打印 6

//此时微任务队列

[

  0: (

    await syn2()

    console.log('end')

		return 7

  )

]

微任务队列非空，继续执行微任务0: ( await syn2() console.log('end') return 7 )，遇到 await，执行 syn2()
进入 syn2 函数，执行new Promise((r, j)=>r()).then(()=>console.log(3))，把 then 中的 () => console.log(3)推入微任务队列
```
//此时微任务队列

[

  0: () => console.log(3)

]
```

把后续代码推入微任务队列

//此时微任务队列

[

  0: () => console.log(3),

  1: (

    console.log('end')

    return 7

  )

]

微任务队列非空，继续执行微任务0: console.log('3')，打印 3

//此时微任务队列

[

  0: (

    console.log('end')

    return 7

  )

]

微任务队列非空，继续执行微任务0: ( console.log('end') return 7 )，打印 end，继续执行 return 7 ，asyncFunc 函数执行完毕，返回 Promise.resolve(7)，执行then(v => console.log(v))，把v => console.log(v)推入微任务队列
```
//此时微任务队列

[

  0: console.log(7)

]
```
微任务队列非空，继续执行微任务0: console.log(7) ，打印 7
微任务队列为空，执行宏任务0: () => console.log(5)，打印 5
微任务队列为空，宏任务队列为空，执行完毕。

结尾

其实 async await 的执行并非如此，真正的执行方法是 await 会阻塞后面的代码，让出线程，先执行 async 函数外面的同步代码，等同步代码执行完，再回到 async 内部继续执行。

让我们回到开头的面试题：

// 原 async1，async2

async function async1() {

  console.log('async1 start')

  await async2()

  console.log('async1 end')

}

async function async2() {

  console.log('async2')

}

// 转换成这样

function async1() {

  console.log('async1 start')

  Promise.resolve(async2()).then(() => {

    console.log('async1 end')

  	return Promise.resolve()

  })

}

function async2() {

  console.log('async2')

  return Promise.resolve()

}

但以这种形式去理解是不是比规范中那晦涩的英文更好理解呢。

最后附上TC39规范。