深入理解JavaScript Promise异步执行与微任务队列

本文深入探讨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() 方法的行为特性：

1. 异步性: then()方法的回调函数（无论其前置Promise状态如何）总是会被放入微任务队列，因此它们永远不会在当前同步代码块中立即执行。
2. 链式调用: then()方法总是返回一个新的Promise对象。这个新Promise的状态将由其回调函数的返回值决定：
   • 如果回调函数返回一个非Promise值，新Promise会以该值作为结果被履行（fulfilled）。
   • 如果回调函数返回一个Promise，新Promise会“采纳”该返回Promise的状态（即，如果返回Promise履行，新Promise也履行；如果返回Promise拒绝，新Promise也拒绝）。
3. 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的状态变化。

1. 初始同步执行阶段：

   • 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);
     • 同步代码执行，输出 9。

   当前状态:

   

   讯飞智作-虚拟主播

   讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

   下载
   • 输出: 9
   • 微任务队列: [a_then]

2. 事件循环第一次迭代：清空微任务队列

   • 主线程同步代码执行完毕，事件循环开始处理微任务队列。
   • 从微任务队列中取出 a_then 并执行。
   • 执行 a_then 回调：
     • console.log(1);
       • 输出 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);
       • 输出 4。
     • a_then 回调执行完毕，其返回值（undefined）用于履行 Promise b。
       • Promise b 进入 履行 (Fulfilled) 状态。
       • 由于 b 现在已履行，之前注册到 b 内部回调列表中的 b_then 回调函数被添加到 微任务队列。

   当前状态:

   • 输出: 9, 1, 4
   • 微任务队列: [c_then, b_then]

3. 事件循环第二次迭代：清空微任务队列

   • 从微任务队列中取出 c_then 并执行。
   • 执行 c_then 回调：
     • console.log(2);
       • 输出 2。
     • c_then 回调执行完毕，其返回值（undefined）用于履行 Promise d。
       • Promise d 进入 履行 (Fulfilled) 状态。
       • 由于 d 现在已履行，之前注册到 d 内部回调列表中的 d_then 回调函数被添加到 微任务队列。

   当前状态:

   • 输出: 9, 1, 4, 2
   • 微任务队列: [b_then, d_then]

4. 事件循环第三次迭代：清空微任务队列

   • 从微任务队列中取出 b_then 并执行。
   • 执行 b_then 回调：
     • console.log(5);
       • 输出 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);
       • 输出 8。
     • b_then 回调执行完毕，其返回值（undefined）用于履行 Promise f。
       • Promise f 进入 履行 (Fulfilled) 状态。

   当前状态:

   • 输出: 9, 1, 4, 2, 5, 8
   • 微任务队列: [d_then, g_then]

5. 事件循环第四次迭代：清空微任务队列

   • 从微任务队列中取出 d_then 并执行。
   • 执行 d_then 回调：
     • console.log(3);
       • 输出 3。
     • d_then 回调执行完毕，其返回值（undefined）用于履行 Promise e。
       • Promise e 进入 履行 (Fulfilled) 状态。

   当前状态:

   • 输出: 9, 1, 4, 2, 5, 8, 3
   • 微任务队列: [g_then]

6. 事件循环第五次迭代：清空微任务队列

   • 从微任务队列中取出 g_then 并执行。
   • 执行 g_then 回调：
     • console.log(6);
       • 输出 6。
     • g_then 回调执行完毕，其返回值（undefined）用于履行 Promise h。
       • Promise h 进入 履行 (Fulfilled) 状态。
       • 由于 h 现在已履行，之前注册到 h 内部回调列表中的 h_then 回调函数被添加到 微任务队列。

   当前状态:

   • 输出: 9, 1, 4, 2, 5, 8, 3, 6
   • 微任务队列: [h_then]

7. 事件循环第六次迭代：清空微任务队列

   • 从微任务队列中取出 h_then 并执行。
   • 执行 h_then 回调：
     • console.log(7);
       • 输出 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链和理解其背后的事件循环机制，是编写健壮、高性能应用的基础。