本文深入探讨javascript中promise的执行机制，特别是其与微任务队列的交互。通过一个具体的代码示例，我们将逐步解析promise链、`then`回调的注册与执行顺序，揭示同步代码、异步微任务以及嵌套异步操作如何协同工作，帮助读者掌握promise的异步行为和事件循环中的微任务处理流程。
JavaScript异步机制与Promise基础
JavaScript作为单线程语言，通过事件循环（Event Loop）机制处理异步操作，避免阻塞主线程。其中，Promise是处理异步操作的核心工具之一，它代表一个异步操作的最终完成（或失败）及其结果值。理解Promise的关键在于其与微任务队列（Microtask Queue，也常被称为PromiseJob Queue）的交互。
在JavaScript的事件循环中，任务被分为宏任务（Macrotask）和微任务（Microtask）。宏任务包括脚本整体代码、setTimeout、setInterval、I/O等；微任务则包括Promise.then()、Promise.catch()、Promise.finally()的回调，以及MutationObserver的回调等。事件循环的执行顺序是：
- 执行当前宏任务（例如，整个脚本）。
- 执行所有可用的微任务。
- 渲染UI（如果需要）。
- 开始下一个宏任务。
这意味着，当主线程的同步代码执行完毕后，在渲染或执行下一个宏任务之前，会清空微任务队列中的所有任务。
Promise的关键行为
在分析具体代码之前，我们需要明确Promise的两个关键行为：
立即学习“Java免费学习笔记（深入）”；
-
Promise.then()回调的入队时机： 当一个Promise被解决（fulfilled或rejected）时，所有注册在其上的then、catch或finally回调函数会被放入微任务队列中。
-
then()方法返回的Promise状态： 调用then()方法本身是同步的，它会立即返回一个新的Promise。这个新的Promise的初始状态总是pending（待定），即使then()是作用在一个已经解决的Promise上。新Promise的解决或拒绝取决于then回调的执行结果（返回值或抛出的异常），而这个回调是异步执行的。
示例代码分析
我们将通过以下JavaScript代码示例，详细解析其执行顺序：
var a = Promise.resolve(); // Promise 'a' 立即被解决
var b = a.then(function a_then() {
console.log(1);
var c = Promise.resolve(); // Promise 'c' 立即被解决
var d = c.then(function c_then() {
console.log(2);
});
var e = d.then(function d_then() {
console.log(3);
});
console.log(4);
});
var f = b.then(function b_then() {
console.log(5);
var g = Promise.resolve(); // Promise 'g' 立即被解决
var h = g.then(function g_then() {
console.log(6);
});
var i = h.then(function h_then() {
console.log(7);
});
console.log(8);
});
console.log(9);登录后复制
为了方便理解，我们对原始代码中的Promise和回调函数进行了命名。
逐步执行流程
我们将按照事件循环的规则，一步步追踪代码的执行和微任务队列的变化。
1. 同步代码阶段
首先，JavaScript引擎会从上到下执行所有的同步代码。
- var a = Promise.resolve();
- Promise a 被创建并立即进入 fulfilled 状态。
- var b = a.then(function a_then() { ... });
- then() 方法被调用。它注册了 a_then 回调函数到Promise a 上。
- 由于 a 已经处于 fulfilled 状态，a_then 函数被添加到微任务队列。
- then() 方法返回一个新的Promise，赋值给 b。此时 b 处于 pending 状态。
- var f = b.then(function b_then() { ... });
- then() 方法被调用。它注册了 b_then 回调函数到Promise b 上。
- 由于 b 仍处于 pending 状态，b_then 暂时不会被添加到微任务队列。它会等待 b 解决。
- then() 方法返回一个新的Promise，赋值给 f。此时 f 处于 pending 状态。
- console.log(9);
当前输出： 9微任务队列： [a_then]
2. 微任务队列处理阶段 (第一次清空)
主线程的同步代码执行完毕，事件循环开始清空微任务队列。
-
执行 a_then (从微任务队列取出)
- console.log(1);
- var c = Promise.resolve();
- Promise c 被创建并立即进入 fulfilled 状态。
- var d = c.then(function c_then() { ... });
- then() 方法被调用。它注册了 c_then 回调函数到Promise c 上。
- 由于 c 已经处于 fulfilled 状态，c_then 函数被添加到微任务队列。
- then() 方法返回一个新的Promise，赋值给 d。此时 d 处于 pending 状态。
- var e = d.then(function d_then() { ... });
- then() 方法被调用。它注册了 d_then 回调函数到Promise d 上。
- 由于 d 仍处于 pending 状态，d_then 暂时不会被添加到微任务队列。它会等待 d 解决。
- then() 方法返回一个新的Promise，赋值给 e。此时 e 处于 pending 状态。
- console.log(4);
- a_then 函数执行完毕。由于 a_then 没有明确返回一个Promise，它默认返回 undefined，这会使Promise b 进入 fulfilled 状态。
- 现在 b 已经 fulfilled，之前注册在 b 上的 b_then 回调被添加到微任务队列。
当前输出： 9, 1, 4微任务队列： [c_then, b_then] (注意顺序，c_then先入队)
3. 微任务队列处理阶段 (第二次清空)
继续清空微任务队列。
-
执行 c_then (从微任务队列取出)
- console.log(2);
- c_then 函数执行完毕。它默认返回 undefined，这会使Promise d 进入 fulfilled 状态。
- 现在 d 已经 fulfilled，之前注册在 d 上的 d_then 回调被添加到微任务队列。
当前输出： 9, 1, 4, 2微任务队列： [b_then, d_then]
4. 微任务队列处理阶段 (第三次清空)
继续清空微任务队列。
-
执行 b_then (从微任务队列取出)
- console.log(5);
- var g = Promise.resolve();
- Promise g 被创建并立即进入 fulfilled 状态。
- var h = g.then(function g_then() { ... });
- then() 方法被调用。它注册了 g_then 回调函数到Promise g 上。
- 由于 g 已经处于 fulfilled 状态，g_then 函数被添加到微任务队列。
- then() 方法返回一个新的Promise，赋值给 h。此时 h 处于 pending 状态。
- var i = h.then(function h_then() { ... });
- then() 方法被调用。它注册了 h_then 回调函数到Promise h 上。
- 由于 h 仍处于 pending 状态，h_then 暂时不会被添加到微任务队列。它会等待 h 解决。
- then() 方法返回一个新的Promise，赋值给 i。此时 i 处于 pending 状态。
- console.log(8);
- b_then 函数执行完毕。它默认返回 undefined，这会使Promise f 进入 fulfilled 状态。
当前输出： 9, 1, 4, 2, 5, 8微任务队列： [d_then, g_then]
5. 微任务队列处理阶段 (第四次清空)
继续清空微任务队列。
-
执行 d_then (从微任务队列取出)
- console.log(3);
- d_then 函数执行完毕。它默认返回 undefined，这会使Promise e 进入 fulfilled 状态。
当前输出： 9, 1, 4, 2, 5, 8, 3微任务队列： [g_then]
6. 微任务队列处理阶段 (第五次清空)
继续清空微任务队列。
-
执行 g_then (从微任务队列取出)
- console.log(6);
- g_then 函数执行完毕。它默认返回 undefined，这会使Promise h 进入 fulfilled 状态。
- 现在 h 已经 fulfilled，之前注册在 h 上的 h_then 回调被添加到微任务队列。
当前输出： 9, 1, 4, 2, 5, 8, 3, 6微任务队列： [h_then]
7. 微任务队列处理阶段 (第六次清空)
继续清空微任务队列。
-
执行 h_then (从微任务队列取出)
- console.log(7);
- h_then 函数执行完毕。它默认返回 undefined，这会使Promise i 进入 fulfilled 状态。
当前输出： 9, 1, 4, 2, 5, 8, 3, 6, 7微任务队列： []
8. 微任务队列为空
所有任务执行完毕。
最终输出顺序
根据上述详细分析，最终的 console.log 输出顺序为：
9, 1, 4, 2, 5, 8, 3, 6, 7
这与问题中给出的预期输出完全一致。
总结与注意事项
通过这个示例，我们可以得出以下关键结论和注意事项：
-
同步代码优先： 任何Promise回调（微任务）的执行都必须等待当前宏任务（即主脚本）中的所有同步代码执行完毕。
-
微任务的优先级： 微任务队列在每个宏任务执行后，以及下一次渲染或下一个宏任务开始之前，会被完全清空。这意味着微任务具有很高的优先级，可以“插队”在宏任务之间。
-
then()返回新Promise的延迟性： promise.then()本身是同步操作，但它返回的新Promise的状态（fulfilled/rejected）取决于其回调函数的异步执行结果。
-
嵌套Promise的影响： 在一个then回调中创建并处理新的Promise，其内部的then回调会立即被添加到微任务队列，但它们会在当前正在执行的then回调完成后，且在队列中更早的任务之后才会被处理。
-
微任务队列的动态性： 微任务队列在代码执行过程中是动态变化的。新的微任务可能会在现有微任务执行时被添加到队列中。
理解这些机制对于编写高效、可预测的异步JavaScript代码至关重要。掌握Promise的执行顺序，特别是它与事件循环和微任务队列的交互，是深入理解JavaScript异步编程的基础。
以上就是深入理解JavaScript异步：Promise执行顺序与微任务队列解析的详细内容，更多请关注php中文网其它相关文章！
267
收藏
