本文深入探讨javascript中promise的异步执行机制，特别是其与事件循环和微任务队列的交互。通过一个具体代码示例，我们将逐步分析promise链中`then`回调函数的入队、出队及执行顺序，揭示`console.log`输出背后的原理，帮助开发者掌握promise的执行时序。
JavaScript异步编程基石：Promise与微任务队列
在JavaScript中，异步操作是常态，而Promise是处理这些异步操作的核心工具之一。理解Promise的执行顺序，尤其是其如何与JavaScript的事件循环机制（Event Loop）中的微任务队列（Microtask Queue，也常被称为PromiseJob Queue）交互，对于编写高效、可预测的异步代码至关重要。
核心概念回顾：
-
事件循环 (Event Loop): JavaScript运行时环境（如浏览器或Node.js）的核心机制，负责协调代码执行、处理事件和执行异步任务。
-
任务队列 (Task Queue / Macrotask Queue): 存放宏任务，如setTimeout、setInterval、I/O操作等。
-
微任务队列 (Microtask Queue / PromiseJob Queue): 存放微任务，如Promise的then/catch/finally回调、MutationObserver回调等。
-
执行顺序优先级: 同步代码 > 微任务 > 宏任务。这意味着在每次事件循环迭代中，当主线程的同步代码执行完毕后，会优先清空所有微任务，然后才会处理一个宏任务。
Promise then() 方法的行为特性：
-
异步性: then()方法的回调函数（无论其前置Promise状态如何）总是会被放入微任务队列，因此它们永远不会在当前同步代码块中立即执行。
-
链式调用: then()方法总是返回一个新的Promise对象。这个新Promise的状态将由其回调函数的返回值决定：
- 如果回调函数返回一个非Promise值，新Promise会以该值作为结果被履行（fulfilled）。
- 如果回调函数返回一个Promise，新Promise会“采纳”该返回Promise的状态（即，如果返回Promise履行，新Promise也履行；如果返回Promise拒绝，新Promise也拒绝）。
-
Promise.resolve(): 创建一个立即处于履行状态的Promise。
示例代码分析
我们将通过以下JavaScript代码来详细分析Promise的执行顺序。为了便于追踪，我们对原始代码进行了少量修改，为每个Promise和回调函数赋予了名称，但这不改变其核心逻辑和输出结果。
立即学习“Java免费学习笔记（深入）”；
var a = Promise.resolve(); // Promise 'a' 立即被履行
var b = a.then(function a_then() { // 'a_then' 回调
console.log(1);
var c = Promise.resolve(); // Promise 'c' 立即被履行
var d = c.then(function c_then() { // 'c_then' 回调
console.log(2);
});
var e = d.then(function d_then() { // 'd_then' 回调
console.log(3);
});
console.log(4);
});
var f = b.then(function b_then() { // 'b_then' 回调
console.log(5);
var g = Promise.resolve(); // Promise 'g' 立即被履行
var h = g.then(function g_then() { // 'g_then' 回调
console.log(6);
});
var i = h.then(function h_then() { // 'h_then' 回调
console.log(7);
});
console.log(8);
});
console.log(9);登录后复制
预期输出：9, 1, 4, 2, 5, 8, 3, 6, 7
逐步执行流程解析
我们将模拟JavaScript事件循环的执行过程，追踪主线程（同步代码）、微任务队列（PromiseJob Queue）以及各个Promise的状态变化。
-
初始同步执行阶段：
- var a = Promise.resolve();
- Promise a 被创建并立即进入 履行 (Fulfilled) 状态。
- var b = a.then(function a_then() { ... });
- 由于 a 已经履行，a_then 回调函数被添加到 微任务队列。
- Promise b 被创建，并处于 待定 (Pending) 状态。
- var f = b.then(function b_then() { ... });
- 由于 b 仍处于待定状态，b_then 回调函数被添加到 b 的内部回调列表中，等待 b 履行后才会被移入微任务队列。
- Promise f 被创建，并处于 待定 (Pending) 状态。
- console.log(9);
当前状态:
-
事件循环第一次迭代：清空微任务队列
- 主线程同步代码执行完毕，事件循环开始处理微任务队列。
- 从微任务队列中取出 a_then 并执行。
-
执行 a_then 回调：
- console.log(1);
- var c = Promise.resolve();
- Promise c 被创建并立即进入 履行 (Fulfilled) 状态。
- var d = c.then(function c_then() { ... });
- 由于 c 已经履行，c_then 回调函数被添加到 微任务队列。
- Promise d 被创建，并处于 待定 (Pending) 状态。
- var e = d.then(function d_then() { ... });
- 由于 d 仍处于待定状态，d_then 回调函数被添加到 d 的内部回调列表中，等待 d 履行后才会被移入微任务队列。
- Promise e 被创建，并处于 待定 (Pending) 状态。
- console.log(4);
- a_then 回调执行完毕，其返回值（undefined）用于履行 Promise b。
- Promise b 进入 履行 (Fulfilled) 状态。
- 由于 b 现在已履行，之前注册到 b 内部回调列表中的 b_then 回调函数被添加到 微任务队列。
当前状态:
-
输出: 9, 1, 4
-
微任务队列: [c_then, b_then]
-
事件循环第二次迭代：清空微任务队列
- 从微任务队列中取出 c_then 并执行。
-
执行 c_then 回调：
- console.log(2);
- c_then 回调执行完毕，其返回值（undefined）用于履行 Promise d。
- Promise d 进入 履行 (Fulfilled) 状态。
- 由于 d 现在已履行，之前注册到 d 内部回调列表中的 d_then 回调函数被添加到 微任务队列。
当前状态:
-
输出: 9, 1, 4, 2
-
微任务队列: [b_then, d_then]
-
事件循环第三次迭代：清空微任务队列
- 从微任务队列中取出 b_then 并执行。
-
执行 b_then 回调：
- console.log(5);
- var g = Promise.resolve();
- Promise g 被创建并立即进入 履行 (Fulfilled) 状态。
- var h = g.then(function g_then() { ... });
- 由于 g 已经履行，g_then 回调函数被添加到 微任务队列。
- Promise h 被创建，并处于 待定 (Pending) 状态。
- var i = h.then(function h_then() { ... });
- 由于 h 仍处于待定状态，h_then 回调函数被添加到 h 的内部回调列表中，等待 h 履行后才会被移入微任务队列。
- Promise i 被创建，并处于 待定 (Pending) 状态。
- console.log(8);
- b_then 回调执行完毕，其返回值（undefined）用于履行 Promise f。
- Promise f 进入 履行 (Fulfilled) 状态。
当前状态:
-
输出: 9, 1, 4, 2, 5, 8
-
微任务队列: [d_then, g_then]
-
事件循环第四次迭代：清空微任务队列
- 从微任务队列中取出 d_then 并执行。
-
执行 d_then 回调：
- console.log(3);
- d_then 回调执行完毕，其返回值（undefined）用于履行 Promise e。
- Promise e 进入 履行 (Fulfilled) 状态。
当前状态:
-
输出: 9, 1, 4, 2, 5, 8, 3
-
微任务队列: [g_then]
-
事件循环第五次迭代：清空微任务队列
- 从微任务队列中取出 g_then 并执行。
-
执行 g_then 回调：
- console.log(6);
- g_then 回调执行完毕，其返回值（undefined）用于履行 Promise h。
- Promise h 进入 履行 (Fulfilled) 状态。
- 由于 h 现在已履行，之前注册到 h 内部回调列表中的 h_then 回调函数被添加到 微任务队列。
当前状态:
-
输出: 9, 1, 4, 2, 5, 8, 3, 6
-
微任务队列: [h_then]
-
事件循环第六次迭代：清空微任务队列
- 从微任务队列中取出 h_then 并执行。
-
执行 h_then 回调：
- console.log(7);
- h_then 回调执行完毕，其返回值（undefined）用于履行 Promise i。
- Promise i 进入 履行 (Fulfilled) 状态。
当前状态:
-
输出: 9, 1, 4, 2, 5, 8, 3, 6, 7
-
微任务队列: []
至此，所有Promise回调都已执行完毕，微任务队列为空。最终输出与预期一致。
总结与注意事项
通过上述详细分析，我们可以得出以下关键点：
-
同步代码优先: 任何Promise操作都无法阻止当前同步代码的立即执行。console.log(9) 首先输出就证明了这一点。
-
then回调的异步性: 即使Promise已经解决，其then回调也总是会异步执行，被推入微任务队列等待。
-
Promise链的执行顺序: Promise链中的下一个then回调，只有在前一个Promise（即then方法返回的Promise）被解决后，才会被推入微任务队列。
-
微任务队列的清空机制: 在每次事件循环迭代中，主线程执行完当前所有同步代码后，会立即清空微任务队列中的所有任务，然后再进入宏任务阶段。这是理解复杂Promise链执行顺序的关键。
掌握这些原理，将帮助您更好地预测和调试JavaScript异步代码，避免常见的异步陷阱。在实际开发中，合理组织Promise链和理解其背后的事件循环机制，是编写健壮、高性能应用的基础。
以上就是深入理解JavaScript Promise异步执行与微任务队列的详细内容，更多请关注php中文网其它相关文章！
287
收藏
