理解JavaScript Promise的微任务队列与执行顺序
本文深入探讨javascript中promise异步函数的执行顺序，特别是微任务队列的工作机制。通过一个具体的代码示例，我们将逐步解析promise的创建、状态变化以及`then`回调如何被调度和执行，揭示其背后的事件循环原理，帮助开发者清晰理解复杂的异步流程。
JavaScript异步编程与事件循环
JavaScript是一种单线程语言，这意味着它一次只能执行一个任务。然而，为了处理耗时的操作（如网络请求、文件读写等），JavaScript引入了异步编程模型。事件循环（Event Loop）是实现这一模型的关键机制，它协调着同步代码、宏任务（Macrotasks）和微任务（Microtasks）的执行。
当JavaScript引擎执行代码时，它会首先执行所有同步代码。同步代码执行完毕后，事件循环会检查微任务队列。微任务（如Promise的回调函数、MutationObserver回调）具有更高的优先级，它们会在当前宏任务（如脚本执行、定时器回调、事件回调）结束之后、下一个宏任务开始之前被清空。Promise的回调函数就是典型的微任务。
Promise核心机制解析
理解Promise的执行顺序，需要掌握以下几个核心概念：
-
Promise状态：
- pending（待定）：初始状态，既不是成功也不是失败。
- fulfilled（已成功）：操作成功完成。
- rejected（已失败）：操作失败。
- Promise的状态一旦从pending变为fulfilled或rejected，就不能再改变，这个过程称为“解决”（settled）。
-
Promise.resolve()：
- 这个方法返回一个已经状态为fulfilled的Promise对象。如果传入的值本身就是一个Promise，则直接返回该Promise。
-
Promise.prototype.then()：
- then()方法是Promise链式调用的核心。它接受两个可选参数：onFulfilled回调函数和onRejected回调函数。
- 关键点一：then()方法本身是同步执行的，它会立即返回一个新的pending状态的Promise对象。
- 关键点二：onFulfilled或onRejected这两个回调函数是异步执行的。当调用then()方法的Promise对象状态变为fulfilled或rejected时，相应的回调函数会被放入微任务队列中。
- 关键点三：then()方法返回的新Promise的状态，由其回调函数的返回值决定。如果回调函数返回一个非Promise值，新Promise会以该值fulfilled；如果返回一个Promise，新Promise会追随该Promise的状态。
示例代码深度剖析
为了更清晰地理解执行流程，我们将原始代码稍作修改，为每个Promise和回调函数赋予明确的名称，但这不改变其逻辑和输出结果：
var a = Promise.resolve(); // Promise 'a' 立即变为 fulfilled
var b = a.then(function a_then() { // 'a_then' 是 'a' 的 onFulfilled 回调
console.log(1);
var c = Promise.resolve(); // Promise 'c' 立即变为 fulfilled
var d = c.then(function c_then() { // 'c_then' 是 'c' 的 onFulfilled 回调
console.log(2);
});
var e = d.then(function d_then() { // 'd_then' 是 'd' 的 onFulfilled 回调
console.log(3);
});
console.log(4);
});
var f = b.then(function b_then() { // 'b_then' 是 'b' 的 onFulfilled 回调
console.log(5);
var g = Promise.resolve(); // Promise 'g' 立即变为 fulfilled
var h = g.then(function g_then() { // 'g_then' 是 'g' 的 onFulfilled 回调
console.log(6);
});
var i = h.then(function h_then() { // 'h_then' 是 'h' 的 onFulfilled 回调
console.log(7);
});
console.log(8);
});
console.log(9);我们将按照事件循环的顺序，逐步分析这段代码的执行
过程和微任务队列的变化。
执行流程分析
-
同步代码执行阶段：
- var a = Promise.resolve();：Promise a 立即被解决（fulfilled状态）。
- var b = a.then(function a_then() { ... });：
- a 已经是fulfilled状态，因此 a_then 回调函数被调度，加入微任务队列。
- then() 方法立即返回一个新的Promise b，其状态为pending。
- var f = b.then(function b_then() { ... });：
- b 当前是pending状态，因此 b_then 回调函数被注册到 b 上，但尚未加入微任务队列。它会等待 b 解决后才被调度。
- then() 方法立即返回一个新的Promise f，其状态为pending。
- console.log(9);：同步执行，输出 9。
- 当前微任务队列：[a_then]。
- 输出：9
-
第一次微任务队列清空：
- 事件循环检测到同步代码执行完毕，开始清空微任务队列。
-
取出并执行 a_then 回调函数：
- console.log(1);：输出 1。
- var c = Promise.resolve();：Promise c 立即被解决（fulfilled状态）。
- var d = c.then(function c_then() { ... });：
- c 已经是fulfilled状态，因此 c_then 回调函数被调度，加入微任务队列。
- then() 方法立即返回一个新的Promise d，其状态为pending。
- var e = d.then(function d_then() { ... });：
- d 当前是pending状态，因此 d_then 回调函数被注册到 d 上，尚未加入微任务队列。
- then() 方法立即返回一个新的Promise e，其状态为pending。
- console.log(4);：输出 4。
- a_then 回调函数执行完毕。由于它没有显式返回值，Promise b 会以 undefined 为值被解决（fulfilled状态）。
- Promise b 状态变为fulfilled后，之前注册在 b 上的 b_then 回调函数被调度，加入微任务队列。
- 当前微任务队列：[c_then, b_then]。
- 输出：9, 1, 4
-
第二次微任务队列清空：
-
取出并执行 c_then 回调函数：
- console.log(2);：输出 2。
- c_then 回调函数执行完毕。Promise d 会以 undefined 为值被解决（fulfilled状态）。
- Promise d 状态变为fulfilled后，之前注册在 d 上的 d_then 回调函数被调度，加入微任务队列。
- 当前微任务队列：[b_then, d_then]。
- 输出：9, 1, 4, 2
-
取出并执行 c_then 回调函数：
-
第三次微任务队列清空：
-
取出并执行 b_then 回调函数：
- console.log(5);：输出 5。
- var g = Promise.resolve();：Promise g 立即被解决（fulfilled状态）。
- var h = g.then(function g_then() { ... });：
- g 已经是fulfilled状态，因此 g_then 回调函数被调度，加入微任务队列。
- then() 方法立即返回一个新的Promise h，其状态为pending。
- var i = h.then(function h_then() { ... });：
- h 当前是pending状态，因此 h_then 回调函数被注册到 h 上，尚未加入微任务队列。
- then() 方法立即返回一个新的Promise i，其状态为pending。
- console.log(8);：输出 8。
- b_then 回调函数执行完毕。Promise f 会以 undefined 为值被解决（fulfilled状态）。
- 当前微任务队列：[d_then, g_then]。
- 输出：9, 1, 4, 2, 5, 8
-
取出并执行 b_then 回调函数：
-
第四次微任务队列清空：
-
取出并执行 d_then 回调函数：
- console.log(3);：输出 3。
- d_then 回调函数执行完毕。Promise e 会以 undefined 为值被解决（fulfilled状态）。
- 当前微任务队列：[g_then]。
- 输出：9, 1, 4, 2, 5, 8, 3
-
取出并执行 d_then 回调函数：
第五次微任务队列清空
