关于es6:结合收藏文章-async-await-8张图详解执行顺序总结

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

输入后果（谷歌浏览器）：

1、c start2、axios3、c end4、promise15、window6、申请胜利7、promise28、a: undefined9、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%正确，学而时习之，温故而知新