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

执行顺序是这样的：

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

   // 伪代码
   //此时异步宏任务队列
   [ 0: () => console.log(5) ]
   

2. 执行 console.log(0)，打印 0

3. 执行 asyncFunc()，进入 asyncFunc 函数

4. 执行 console.log('start')，打印 start

5. 执行 await console.log(1)，打印 1

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

   //此时微任务队列
   [ 0: (
       await syn1() 
       await syn2() 
       console.log('end')
   		return 7
     ) 
   ]
   

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)
   ]
   

8. 执行 console.log(4)，打印 4

9. 同步任务执行完毕，开始清空微任务队列

10. 执行微任务 0: ( await syn1() await syn2() console.log('end') return 7 ) ，遇到 await，执行 syn1()

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

    //此时微任务队列
    [ 
      0: () => console.log(6),
      1: (
        await syn2() 
        console.log('end')
    		return 7
      )   
    ]
    

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

    //此时微任务队列
    [ 
      0: (
        await syn2() 
        console.log('end')
    		return 7
      )   
    ]
    

13. 微任务队列非空，继续执行微任务0: ( await syn2() console.log('end') return 7 )，遇到 await，执行 syn2()

14. 进入 syn2 函数，执行new Promise((r, j)=>r()).then(()=>console.log(3))，把 then 中的 () => console.log(3)推入微任务队列

    //此时微任务队列
    [ 
      0: () => console.log(3)
    ]
    

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

    //此时微任务队列
    [ 
      0: () => console.log(3),
      1: (
        console.log('end')
        return 7
      )
    ]
    

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

    //此时微任务队列
    [ 
      0: (
        console.log('end')
        return 7
      )
    ]
    

17. 微任务队列非空，继续执行微任务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)
    ]
    

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

19. 微任务队列为空，执行宏任务0: () => console.log(5)，打印 5

20. 微任务队列为空，宏任务队列为空，执行完毕。

结尾

---

其实 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规范。