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

本文深入探讨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的两个关键行为：

1. 当一个Promise被解决（fulfilled或rejected）时，其上注册的任何then回调（如果存在）都会被放入微任务队列（PromiseJob queue）中。
2. 调用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状态的转换。

详细执行步骤

1. 同步代码执行阶段

   • 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。
   • 此时，主脚本同步代码执行完毕，调用栈清空。

2. 事件循环处理微任务阶段

   • 事件循环从微任务队列中取出第一个任务 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 并执行。

     

     绘蛙AI修图

     绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

     285

     查看详情

   • 执行 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 解决。
     • 微任务队列: [] (清空)

3. 最终输出顺序

根据上述分析，最终的控制台输出顺序为： 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状态转换的深入理解，开发者可以更好地掌握异步流程控制，避免常见的并发问题。

以上就是深入理解JavaScript Promise异步执行顺序与微任务队列的详细内容，更多请关注php中文网其它相关文章！