先看两个示例体现的问题

async function async1() {
  console.log("2");
  await async2();
  console.log(23132);
  await async3();
  console.log("3");
}
async function async2() {
  console.log("4");
  await async4();
}
async function async3() {
  console.log("5");
}
async function async4() {
  console.log("6");
}
async1();
setTimeout(function () {
  console.log("setTimeout");
}, 0);
new Promise((resolve) => {
  console.log("Promise");
  resolve();
})
  .then(function () {
    console.log("promise1");
  })
  .then(function () {
    console.log("promise2");
  });
console.log("7");
////结果//////////////////////////
2
4
6
Promise
7
promise1
23132
5
promise2
3
setTimeout
async function async1() {
  console.log("2");
  await async2();
  console.log(23132);
  await async3();
  console.log("3");
}
async function async2() {
  console.log("4");
  // await async4();取消了第二层的await
}
async function async3() {
  console.log("5");
}
async function async4() {
  console.log("6");
}
async1();
setTimeout(function () {
  console.log("setTimeout");
}, 0);
new Promise((resolve) => {
  console.log("Promise");
  resolve();
})
  .then(function () {
    console.log("promise1");
  })
  .then(function () {
    console.log("promise2");
  });
console.log("7");
////结果/////////////////////
2
4
Promise
7
23132
5
promise1
3
promise2
setTimeout

两次代码仅有一行不同,导致结果不同

我们知道async隐式返回 Promise 作为结果的函数,那么可以简单理解为,await后面的函数执行完毕时,await会产生一个微任务(Promise.then是微任务)。但是我们要注意这个微任务产生的时机,它是执行完await之后,直接跳出async函数,执行其他代码(此处就是协程的运作,A暂停执行,控制权交给B)。其他代码执行完毕后,再回到async函数去执行剩下的代码,然后把await后面的代码注册到微任务队列当中。

遇到await就切换协程,执行await后面的函数,并顺序执行下面的宏任务,

执行到底后,执行微任务

再返回到await位置,执行下一行函数,循环上述内容

所以示例一的执行顺序为:

 宏任务和微任务的执行结构如下表

 

 

更多推荐