结合收藏文章 async await 8张图详解执行顺序总结

// 1
function axiosGetList() {
  return new Promise((resolve, reject) => {
    console.log('axios')
    resolve(true)
  })
}
// 2
async function getList() {
  const a = await axiosGetList()
  if (a) {
    console.log('请求成功')
  }
}
// 执行
c()
// 3
function c() {
  console.log('c start')
  async function dd() {
    const a = await getList()
    console.log('a:',a)
  }
  dd()
  console.log('c end')
}
// 4
new Promise((r, j) => {
  console.log('promise1')
  r() // 如果没有这行，promise2 不会执行
}).then(() => {
  console.log('promise2')
})
// 5
setTimeout(() => {
  console.log('settimeout')
}, 0)
// 6
console.log('window')

---

---

---

输出结果（谷歌浏览器）：

1、c start
2、axios
3、c end
4、promise1
5、window
6、请求成功
7、promise2
8、a: undefined
9、settimeout

第一步：

进入 c() 执行 console.log('c start')

第二步：

进入 dd() 执行 await getList()
进入 getList() 执行 await axiosGetList()
进入 axiosGetList() 执行 console.log('axios')

第三步：

执行完所有的 await 后
会跳出到第二步 dd() 的地方(也就是第一次执行 await 的函数
先是寻找与它(dd())同级的同步并执行)
console.log('c end')，同级的同步执行完后
会跳到外层去执行同步
【这里提醒一下，遇到 await 会先截断后面的程序】

第四步：

执行最外层的 new Promise() 的
console.log('promise1')，此时的 then 函数并不会执行
这里不作描述了

第五步：

执行 console.log('window')
为什么不执行 setTimeout 呢，setTimeout 总是会放在最后面去执行
这里也不作描述了

第六步：

执行完外层的同步后，又会回到调用 await 的地方
回到哪一步呢，就是回到最后有执行 await 的地方
去干什么呢，去执行 then 方法
看到 getList() 方法里，我们是通过赋值形式去获取的
当然，你也可以写成 then 形式去，换成 then 就是
await axiosGetList().then(() => { console.log('请求成功') })

第七步：

这时候，await 里面的 then 都执行完了
它又会先跳到外层去寻找异步函数并且去执行它
我们最外层还有个 then 函数没有执行，就是
console.log('promise2')

第八步：

好了，内部与外部的 then 函数都执行完了
可以安心的走 await 后面的程序了，又回到第一次调用
await 的地方执行它后面的 console.log('a', a)
这里的 a 因为没有接收到返回值，所以为 undefined

第九步：

执行 setTimeout 的 console.log('settimeout')

总结：文章仅是个人总结出的结论，并不保证100%正确，学而时习之，温故而知新