Promise回调是否入微任务队列？为何同步代码先执行？

代码示例 #

fetch=() => new Promise ((resolve) => resolve ({m: 121}))

function x() {
    let d = 3;
    fetch().then((data) => {
        d += data.m;
        console.log("b", d);
     });
    console.log("a", d);
 }

 x();

实际输出 #

a 3
b 124

原因解释 #

核心是JavaScript事件循环的执行优先级规则：

• 同步代码会直接进入执行栈优先执行，只有当执行栈中的所有同步任务全部完成后，才会去处理微任务队列中的任务。
• 即便Promise是已决议状态，它的.then()回调也不会立即执行，而是被放入微任务队列等待，不会打断当前正在执行的同步代码。

具体到这段代码的执行流程：

1. 调用x()后，进入函数执行上下文，先声明d = 3。
2. 执行fetch()得到已决议的Promise，此时.then()的回调被加入微任务队列，但不会触发执行。
3. 继续执行同步代码console.log("a", d)，此时d的值还是初始的3，所以输出a 3。
4. x()函数执行完毕，当前执行栈清空，事件循环开始处理微任务队列，取出.then()回调执行：d加上121变成124，输出b 124。

你之前的误解在于错误认为同步代码会被加入队列，但实际上同步代码是直接在执行栈中顺序执行的，微任务只能等待执行栈完全清空后才有机会运行，因此必然晚于当前的同步代码。

内容的提问来源于stack exchange，提问作者kaiyu wei