【前端每天一题】 第 5 题：Promise.then 执行顺序深入题（微任务队列机制）

事件循环第 5 题：Promise.then 执行顺序深入题（微任务队列机制）

这是事件循环中最常考、最容易写错的一题之一。

🎯 面试题：下面这段代码的执行顺序是什么？为什么？

Promise.resolve().then(() => {
  console.log(1)
  Promise.resolve().then(() => console.log(2))
})
console.log(3)

✅ 标准答案

输出顺序：

3
1
2

---

✅ 详细解析（面试官最喜欢的回答）

第一步：同步任务先执行

同步代码只有：

console.log(3)

所以第一个输出：

3

第二步：微任务队列分析

(1) 首先有一个微任务：

Promise.resolve().then(() => {...})

此时微任务队列：

[ taskA ]

执行 taskA（也就是外层的 then 回调）：

console.log(1)
Promise.resolve().then(() => console.log(2))

所以现在输出：

3
1

(2) taskA 内又创建了一个新的微任务

这段代码：

Promise.resolve().then(() => console.log(2))

把另一个微任务加入队列：

[ taskB ]

事件循环会继续执行此轮的所有微任务，所以执行：

2

最终输出：

3
1
2

---

📌 关键记忆点（速记卡）

🔶 速记 1：微任务是"批处理"执行的

• 宏任务执行完后，所有微任务会连续执行
• 微任务内部再创建的微任务，会排到队列末尾但仍在本轮执行

🔶 速记 2：Promise.then 永远是微任务

🔶 速记 3：执行顺序优先级

顺序永远是：

1. 同步任务
2. 本轮所有微任务
3. 下一轮宏任务（如 setTimeout）