JS Promise的then处理函数执行顺序异常问题咨询

问题重现 #

用户代码：

const myPromise = new Promise((resolve, reject) => {
  resolve("Original resolution");
});

myPromise
  .then((result) => {
    console.log("First .then() block:", result);
  })
  .then((result) => {
    console.log("Second .then() block:", result);
  });

myPromise
  .then((result) => {
    console.log("Third .then() block:", result);
  })
  .then((result) => {
    console.log("Fourth .then() block:", result);
});

预期输出 #

First .then() block: Original resolution
Second .then() block: undefined
Third .then() block: Original resolution
Fourth .then() block: undefined

实际输出 #

First .then() block: Original resolution
Third .then() block: Original resolution
Second .then() block: undefined
Fourth .then() block: undefined

用户疑问 #

已了解微任务队列和事件循环知识，但仍不理解为何then处理函数的入队/执行顺序不符合预期的First→Second→Third→Fourth。

核心原因解析 #

• myPromise是**已决议（resolved）**状态的Promise，调用它的.then()时，回调会被立即添加到微任务队列。
• 第一组链式调用中：第一个.then(First)直接将First回调加入微任务队列；而第二个.then(Second)属于First回调返回的Promise的回调，只有当First回调执行完成后，才会触发Second回调被加入队列。
• 第二组链式调用同理：.then(Third)直接将Third回调加入微任务队列，此时微任务队列的初始顺序是First → Third。
• 事件循环按FIFO顺序处理微任务队列：
  1. 执行First回调，输出对应日志；由于该回调无返回值，默认返回undefined，其对应的Promise决议后，将Second回调加入微任务队列。
  2. 执行Third回调，输出对应日志；同样无返回值，对应的Promise决议后，将Fourth回调加入微任务队列。
  3. 此时微任务队列更新为Second → Fourth，继续按顺序执行，输出剩下的两条日志。
• 本质：同一已决议Promise的直接.then()回调按调用顺序入队；链式后续的.then()依赖前一个回调的执行结果，不会提前入队，因此不会出现在初始的微任务队列中。

内容的提问来源于stack exchange，提问作者Ravi Yadav