JS Promise执行顺序困惑：为何输出为(1,3,2)而非预期(1,2,3)

先看你提供的代码：

let promise = new Promise((resolve) => {
  const res = 1;
  console.log(res);
  resolve(Promise.resolve(res));
}).then((res) => {
  const newRes = res * 2;
  console.log(newRes);
});

Promise.resolve().then(() => console.log(3));

核心误区：resolve(已决议Promise)的处理逻辑 #

你之前误以为resolve(Promise.resolve(res))会直接触发后续的.then回调，但实际上，当resolve的参数是一个已决议的Promise对象时，JS引擎不会立即把外层Promise标记为已决议，而是会额外生成一个微任务，用来等待这个内部Promise的决议流程完成，之后才会触发外层Promise的.then回调。

逐步骤拆解执行流程 #

1. 同步代码执行阶段

   • 执行new Promise构造函数，内部同步代码直接运行：输出1。
   • 调用resolve(Promise.resolve(1))：此时JS引擎会生成一个微任务，任务内容是“调用内部Promise的.then方法，完成外层Promise的决议”，这个微任务被加入当前微任务队列。
   • 调用外层Promise的.then(...)：此时外层Promise还未完成决议，所以这个回调暂时不会进入微任务队列。
   • 执行Promise.resolve().then(() => console.log(3))：Promise.resolve()返回已决议的Promise，它的.then回调被加入当前微任务队列，排在刚才那个“处理内部Promise”的微任务之后。

2. 微任务队列处理阶段（第一轮）

   • 先执行第一个微任务：处理内部Promise的决议。此时内部Promise已经是resolved状态，所以这个微任务执行时，会把外层Promise标记为resolved，并把外层Promise的.then回调（输出2的逻辑）加入下一轮微任务队列。
   • 再执行第二个微任务：输出3。

3. 微任务队列处理阶段（第二轮）

   • 执行下一轮微任务队列里的唯一任务：外层Promise的.then回调，输出2。

最终输出顺序就是：1 → 3 → 2。

内容的提问来源于stack exchange，提问作者Deni Shaipov