本文深入探讨JavaScript中Promise异步函数的执行机制，特别是微任务队列（PromiseJob queue）的作用。通过一个具体的代码示例，我们将逐步解析Promise的创建、`then`回调的注册与执行顺序，揭示事件循环如何调度同步代码、微任务，从而解释复杂的异步输出。
JavaScript异步编程基础与Promise
JavaScript作为单线程语言，为了处理耗时操作（如网络请求、文件读写），引入了异步编程机制。Promise是ES6引入的一种处理异步操作的强大工具，它代表了一个异步操作的最终完成（或失败）及其结果值。理解Promise的执行顺序，特别是它与JavaScript事件循环（Event Loop）和微任务队列（Microtask Queue，也称PromiseJob Queue）的交互至关重要。
事件循环是JavaScript运行时环境的核心，它协调着代码的执行。它主要包含以下组件：
- 调用栈（Call Stack）：执行同步代码。
- 堆（Heap）：存储对象和函数。
- Web API/Node.js API：浏览器或Node.js提供的异步功能（如setTimeout、fetch、Promise等）。
- 任务队列（Task Queue / Macrotask Queue）：存放宏任务（如setTimeout、setInterval、I/O回调）。
- 微任务队列（Microtask Queue / PromiseJob Queue）：存放微任务（如Promise的then/catch/finally回调、queueMicrotask）。
事件循环的优先级是：同步代码 > 微任务 > 宏任务。这意味着，当调用栈清空后，事件循环会优先清空微任务队列中的所有任务，然后才从宏任务队列中取出一个任务执行。
立即学习“Java免费学习笔记（深入）”；
Promise then() 方法的关键行为
在深入分析代码之前，需要明确Promise的两个关键行为：
- 当一个Promise被解决（fulfilled或rejected）时，其上注册的任何then回调（如果存在）都会被放入微任务队列（PromiseJob queue）中。
- 调用then()方法时，它总是会返回一个新的Promise，并且这个新的Promise在then回调执行完成之前，其状态始终是pending。即使then()是在一个已解决的Promise上调用，返回的Promise也需要等待其回调执行完毕才能决定自己的状态。
代码示例与执行分析
为了更好地理解Promise的执行顺序，我们使用以下代码示例。此代码与原始问题中的逻辑相同，但为了便于追踪，我们为每个Promise和回调函数进行了命名。
var a = Promise.resolve(); // Promise 'a' 立即解决
var b = a.then(function a_then() { // 'a_then' 回调注册到 Promise 'a'
console.log(1);
var c = Promise.resolve(); // Promise 'c' 立即解决
var d = c.then(function c_then() { // 'c_then' 回调注册到 Promise 'c'
console.log(2);
});
var e = d.then(function d_then() { // 'd_then' 回调注册到 Promise 'd'
console.log(3);
});
console.log(4);
});
var f = b.then(function b_then() { // 'b_then' 回调注册到 Promise 'b'
console.log(5);
var g = Promise.resolve(); // Promise 'g' 立即解决
var h = g.then(function g_then() { // 'g_then' 回调注册到 Promise 'g'
console.log(6);
});
var i = h.then(function h_then() { // 'h_then' 回调注册到 Promise 'h'
console.log(7);
});
console.log(8);
});
console.log(9);我们将通过一个逐步的事件序列来解析这段代码的执行流程，重点关注同步执行、微任务队列的变化以及Promise状态的转换。
详细执行步骤
-
同步代码执行阶段
- a = Promise.resolve(): Promise a 被创建并立即解决（fulfilled）。
- b = a.then(function a_then() { ... }):
- then方法被调用，返回一个处于pending状态的Promise b。
- 由于Promise a 已经解决，a_then回调被添加到微任务队列。
- 微任务队列: [a_then]
- f = b.then(function b_then() { ... }):
- then方法被调用，返回一个处于pending状态的Promise f。
- 由于Promise b 仍处于pending状态，b_then回调不会立即添加到队列，而是等待b解决。
- 微任务队列: [a_then]
- console.log(9): 同步执行，输出 9。
- 此时，主脚本同步代码执行完毕，调用栈清空。
-
事件循环处理微任务阶段
事件循环从微任务队列中取出第一个任务 a_then 并执行。
-
执行 a_then 回调:
- console.log(1): 输出 1。
- c = Promise.resolve(): Promise c 被创建并立即解决。
- d = c.then(function c_then() { ... }):
- 返回一个pending状态的Promise d。
- 由于Promise c 已解决，c_then 回调被添加到微任务队列。
- 微任务队列: [c_then]
- e = d.then(function d_then() { ... }):
- 返回一个pending状态的Promise e。
- Promise d 仍pending，d_then 等待d解决。
- 微任务队列: [c_then]
- console.log(4): 输出 4。
- a_then 回调执行完毕，它没有显式返回值，默认返回 undefined，这会使得Promise b 解决（fulfilled）。
- 由于Promise b 解决，其上注册的 b_then 回调被添加到微任务队列。
- 微任务队列: [c_then, b_then]
事件循环从微任务队列中取出 c_then 并执行。
-
执行 c_then 回调:
- console.log(2): 输出 2。
- c_then 回调执行完毕，使得Promise d 解决。
- 由于Promise d 解决，其上注册的 d_then 回调被添加到微任务队列。
- 微任务队列: [b_then, d_then]
事件循环从微任务队列中取出 b_then 并执行。
-
执行 b_then 回调:
- console.log(5): 输出 5。
- g = Promise.resolve(): Promise g 被创建并立即解决。
- h = g.then(function g_then() { ... }):
- 返回一个pending状态的Promise h。
- 由于Promise g 已解决，g_then 回调被添加到微任务队列。
- 微任务队列: [d_then, g_then]
- i = h.then(function h_then() { ... }):
- 返回一个pending状态的Promise i。
- Promise h 仍pending，h_then 等待h解决。
- 微任务队列: [d_then, g_then]
- console.log(8): 输出 8。
- b_then 回调执行完毕，使得Promise f 解决。
- 微任务队列: [d_then, g_then]
事件循环从微任务队列中取出 d_then 并执行。
-
执行 d_then 回调:
- console.log(3): 输出 3。
- d_then 回调执行完毕，使得Promise e 解决。
- 微任务队列: [g_then]
事件循环从微任务队列中取出 g_then 并执行。
-
执行 g_then 回调:
- console.log(6): 输出 6。
- g_then 回调执行完毕，使得Promise h 解决。
- 由于Promise h 解决，其上注册的 h_then 回调被添加到微任务队列。
- 微任务队列: [h_then]
事件循环从微任务队列中取出 h_then 并执行。
-
执行 h_then 回调:
- console.log(7): 输出 7。
- h_then 回调执行完毕，使得Promise i 解决。
- 微任务队列: [] (清空)
最终输出顺序
根据上述分析，最终的控制台输出顺序为： 9, 1, 4, 2, 5, 8, 3, 6, 7
这与问题中用户观察到的输出顺序完全一致。
总结与注意事项
- 同步优先：JavaScript总是优先执行所有同步代码，直到调用栈清空。
- 微任务优先级：在同步代码执行完毕后，事件循环会立即清空微任务队列中的所有任务，然后才处理宏任务。这意味着Promise的回调（微任务）比setTimeout等（宏任务）有更高的优先级。
-
链式then的特性：
- Promise.resolve().then(...) 中的then回调会被立即加入微任务队列。
- pending状态的Promise调用then时，其回调会等待Promise解决后才加入微任务队列。
- then()方法本身总是返回一个新的Promise，这个新Promise的状态取决于then回调的执行结果。
- 嵌套Promise：当Promise回调内部又创建了新的Promise并注册then回调时，这些新的回调也会根据其父Promise的状态，被添加到微任务队列中，并等待事件循环调度。
理解这些核心概念对于编写可预测且高效的异步JavaScript代码至关重要。通过对事件循环、微任务队列和Promise状态转换的深入理解，开发者可以更好地掌握异步流程控制，避免常见的并发问题。
