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

本文深入探讨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的回调等。事件循环的执行顺序是：

1. 执行当前宏任务（例如，整个脚本）。
2. 执行所有可用的微任务。
3. 渲染UI（如果需要）。
4. 开始下一个宏任务。

这意味着，当主线程的同步代码执行完毕后，在渲染或执行下一个宏任务之前，会清空微任务队列中的所有任务。

Promise的关键行为

在分析具体代码之前，我们需要明确Promise的两个关键行为：

立即学习“Java免费学习笔记（深入）”；

1. Promise.then()回调的入队时机： 当一个Promise被解决（fulfilled或rejected）时，所有注册在其上的then、catch或finally回调函数会被放入微任务队列中。
2. 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。

当前输出： 9微任务队列： [a_then]

2. 微任务队列处理阶段 (第一次清空)

主线程的同步代码执行完毕，事件循环开始清空微任务队列。

• 执行 a_then (从微任务队列取出)
  • console.log(1);
    • 打印 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);
    • 打印 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);
    • 打印 2。
  • c_then 函数执行完毕。它默认返回 undefined，这会使Promise d 进入 fulfilled 状态。
  • 现在 d 已经 fulfilled，之前注册在 d 上的 d_then 回调被添加到微任务队列。

当前输出： 9, 1, 4, 2微任务队列： [b_then, d_then]

PaperAiBye

支持近30多种语言降ai降重，并且支持多种语言免费测句子的ai率，支持英文aigc报告等

下载

4. 微任务队列处理阶段 (第三次清空)

继续清空微任务队列。

• 执行 b_then (从微任务队列取出)
  • console.log(5);
    • 打印 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);
    • 打印 8。
  • b_then 函数执行完毕。它默认返回 undefined，这会使Promise f 进入 fulfilled 状态。

当前输出： 9, 1, 4, 2, 5, 8微任务队列： [d_then, g_then]

5. 微任务队列处理阶段 (第四次清空)

继续清空微任务队列。

• 执行 d_then (从微任务队列取出)
  • console.log(3);
    • 打印 3。
  • d_then 函数执行完毕。它默认返回 undefined，这会使Promise e 进入 fulfilled 状态。

当前输出： 9, 1, 4, 2, 5, 8, 3微任务队列： [g_then]

6. 微任务队列处理阶段 (第五次清空)

继续清空微任务队列。

• 执行 g_then (从微任务队列取出)
  • console.log(6);
    • 打印 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);
    • 打印 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异步编程的基础。