JavaScript中Promise与await执行顺序异常的原因及代码疑问

第一段代码及疑问解答 #

代码 #

async function hh(){
    const promise1 = new Promise((resolve,reject) => {       
        resolve("First promise");
    });

    const promise2 = new Promise((resolve,reject) => {
        resolve("Second promise");
    });

    promise2.then((a)=>console.log(a));
    console.log(await promise1);
    console.log("sync call");
 }
hh();

执行结果 #

• Second promise
• First promise
• sync call

疑问解答 #

核心在于await的执行逻辑和JS的事件循环优先级：

1. 函数hh同步执行时，创建的两个Promise都会立即resolve，状态变为已兑现。
2. 调用promise2.then(...)时，因为promise2已经兑现，它的回调会被加入微任务队列等待执行。
3. 遇到await promise1时，哪怕promise1已经兑现，JS也会暂停当前hh函数的执行，把hh中await之后的所有代码（包括console.log(await promise1)和console.log("sync call")）封装成一个新的微任务，加入到微任务队列的末尾。
4. 此时同步执行栈已经清空，开始按顺序执行微任务队列：先执行早加入的promise2回调，输出"Second promise"；再执行await后的hh剩余代码，依次输出"First promise"和"sync call"。
   所以"sync call"不会是第一个输出。

第二段代码及疑问解答 #

代码 #

async function hh(){
    const promise1 = new Promise((resolve,reject) => {       
        resolve("First promise");
    });

    const promise2 = new Promise((resolve,reject) => {
        resolve("Second promise");
    });

    promise2.then((a)=>console.log(a));
    console.log("sync call");
 }
hh();

执行结果 #

• sync call
• Second promise

疑问解答 #

去掉await promise1后，console.log("sync call")变成了同步代码：

1. 函数hh同步执行时，同样创建两个已兑现的Promise，把promise2的回调加入微任务队列。
2. 接下来直接同步执行console.log("sync call")，立即输出内容。
3. 等hh函数执行完毕、全局同步栈清空后，才会去执行微任务队列里的promise2回调，输出"Second promise"。
   所以"sync call"会是第一个输出。

内容的提问来源于stack exchange，提问作者Gleb Krylov