async await 的执行顺序问题
·
先看两个示例体现的问题
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位置,执行下一行函数,循环上述内容
所以示例一的执行顺序为:

宏任务和微任务的执行结构如下表
更多推荐
所有评论(0)