理解JavaScript Promise的微任务队列与执行顺序

本文深入探讨javascript中promise异步函数的执行顺序，特别是微任务队列的工作机制。通过一个具体的代码示例，我们将逐步解析promise的创建、状态变化以及`then`回调如何被调度和执行，揭示其背后的事件循环原理，帮助开发者清晰理解复杂的异步流程。

JavaScript异步编程与事件循环

JavaScript是一种单线程语言，这意味着它一次只能执行一个任务。然而，为了处理耗时的操作（如网络请求、文件读写等），JavaScript引入了异步编程模型。事件循环（Event Loop）是实现这一模型的关键机制，它协调着同步代码、宏任务（Macrotasks）和微任务（Microtasks）的执行。

当JavaScript引擎执行代码时，它会首先执行所有同步代码。同步代码执行完毕后，事件循环会检查微任务队列。微任务（如Promise的回调函数、MutationObserver回调）具有更高的优先级，它们会在当前宏任务（如脚本执行、定时器回调、事件回调）结束之后、下一个宏任务开始之前被清空。Promise的回调函数就是典型的微任务。

Promise核心机制解析

理解Promise的执行顺序，需要掌握以下几个核心概念：

1. Promise状态：

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

   • pending（待定）：初始状态，既不是成功也不是失败。
   • fulfilled（已成功）：操作成功完成。
   • rejected（已失败）：操作失败。
   • Promise的状态一旦从pending变为fulfilled或rejected，就不能再改变，这个过程称为“解决”（settled）。

2. Promise.resolve()：

   • 这个方法返回一个已经状态为fulfilled的Promise对象。如果传入的值本身就是一个Promise，则直接返回该Promise。

3. Promise.prototype.then()：

   • then()方法是Promise链式调用的核心。它接受两个可选参数：onFulfilled回调函数和onRejected回调函数。
   • 关键点一：then()方法本身是同步执行的，它会立即返回一个新的pending状态的Promise对象。
   • 关键点二：onFulfilled或onRejected这两个回调函数是异步执行的。当调用then()方法的Promise对象状态变为fulfilled或rejected时，相应的回调函数会被放入微任务队列中。
   • 关键点三：then()方法返回的新Promise的状态，由其回调函数的返回值决定。如果回调函数返回一个非Promise值，新Promise会以该值fulfilled；如果返回一个Promise，新Promise会追随该Promise的状态。

示例代码深度剖析

为了更清晰地理解执行流程，我们将原始代码稍作修改，为每个Promise和回调函数赋予明确的名称，但这不改变其逻辑和输出结果：

Pascal基础教程 Pascal入门必备基础教程 CHM版

无论做任何事情，都要有一定的方式方法与处理步骤。计算机程序设计比日常生活中的事务处理更具有严谨性、规范性、可行性。为了使计算机有效地解决某些问题，须将处理步骤编排好，用计算机语言组成“序列”，让计算机自动识别并执行这个用计算机语言组成的“序列”，完成预定的任务。将处理问题的步骤编排好，用计算机语言组成序列，也就是常说的编写程序。在Pascal语言中，执行每条语句都是由计算机完成相应的操作。编写Pascal程序，是利用Pasca

4

查看详情

var a = Promise.resolve(); // Promise 'a' 立即变为 fulfilled

var b = a.then(function a_then() { // 'a_then' 是 'a' 的 onFulfilled 回调
  console.log(1);
  var c = Promise.resolve(); // Promise 'c' 立即变为 fulfilled
  var d = c.then(function c_then() { // 'c_then' 是 'c' 的 onFulfilled 回调
    console.log(2);
  });
  var e = d.then(function d_then() { // 'd_then' 是 'd' 的 onFulfilled 回调
    console.log(3);
  });
  console.log(4);
});

var f = b.then(function b_then() { // 'b_then' 是 'b' 的 onFulfilled 回调
  console.log(5);
  var g = Promise.resolve(); // Promise 'g' 立即变为 fulfilled
  var h = g.then(function g_then() { // 'g_then' 是 'g' 的 onFulfilled 回调
    console.log(6);
  });
  var i = h.then(function h_then() { // 'h_then' 是 'h' 的 onFulfilled 回调
    console.log(7);
  });
  console.log(8);
});

console.log(9);

我们将按照事件循环的顺序，逐步分析这段代码的执行过程和微任务队列的变化。

执行流程分析

1. 同步代码执行阶段：

   • var a = Promise.resolve();：Promise a 立即被解决（fulfilled状态）。
   • var b = a.then(function a_then() { ... });：
     • a 已经是fulfilled状态，因此 a_then 回调函数被调度，加入微任务队列。
     • then() 方法立即返回一个新的Promise b，其状态为pending。
   • var f = b.then(function b_then() { ... });：
     • b 当前是pending状态，因此 b_then 回调函数被注册到 b 上，但尚未加入微任务队列。它会等待 b 解决后才被调度。
     • then() 方法立即返回一个新的Promise f，其状态为pending。
   • console.log(9);：同步执行，输出 9。
   • 当前微任务队列：[a_then]。
   • 输出：9

2. 第一次微任务队列清空：

   • 事件循环检测到同步代码执行完毕，开始清空微任务队列。
   • 取出并执行 a_then 回调函数：
     • console.log(1);：输出 1。
     • var c = Promise.resolve();：Promise c 立即被解决（fulfilled状态）。
     • var d = c.then(function c_then() { ... });：
       • c 已经是fulfilled状态，因此 c_then 回调函数被调度，加入微任务队列。
       • then() 方法立即返回一个新的Promise d，其状态为pending。
     • var e = d.then(function d_then() { ... });：
       • d 当前是pending状态，因此 d_then 回调函数被注册到 d 上，尚未加入微任务队列。
       • then() 方法立即返回一个新的Promise e，其状态为pending。
     • console.log(4);：输出 4。
     • a_then 回调函数执行完毕。由于它没有显式返回值，Promise b 会以 undefined 为值被解决（fulfilled状态）。
     • Promise b 状态变为fulfilled后，之前注册在 b 上的 b_then 回调函数被调度，加入微任务队列。
   • 当前微任务队列：[c_then, b_then]。
   • 输出：9, 1, 4

3. 第二次微任务队列清空：

   • 取出并执行 c_then 回调函数：
     • console.log(2);：输出 2。
     • c_then 回调函数执行完毕。Promise d 会以 undefined 为值被解决（fulfilled状态）。
     • Promise d 状态变为fulfilled后，之前注册在 d 上的 d_then 回调函数被调度，加入微任务队列。
   • 当前微任务队列：[b_then, d_then]。
   • 输出：9, 1, 4, 2

4. 第三次微任务队列清空：

   • 取出并执行 b_then 回调函数：
     • console.log(5);：输出 5。
     • var g = Promise.resolve();：Promise g 立即被解决（fulfilled状态）。
     • var h = g.then(function g_then() { ... });：
       • g 已经是fulfilled状态，因此 g_then 回调函数被调度，加入微任务队列。
       • then() 方法立即返回一个新的Promise h，其状态为pending。
     • var i = h.then(function h_then() { ... });：
       • h 当前是pending状态，因此 h_then 回调函数被注册到 h 上，尚未加入微任务队列。
       • then() 方法立即返回一个新的Promise i，其状态为pending。
     • console.log(8);：输出 8。
     • b_then 回调函数执行完毕。Promise f 会以 undefined 为值被解决（fulfilled状态）。
   • 当前微任务队列：[d_then, g_then]。
   • 输出：9, 1, 4, 2, 5, 8

5. 第四次微任务队列清空：

   • 取出并执行 d_then 回调函数：
     • console.log(3);：输出 3。
     • d_then 回调函数执行完毕。Promise e 会以 undefined 为值被解决（fulfilled状态）。
   • 当前微任务队列：[g_then]。
   • 输出：9, 1, 4, 2, 5, 8, 3

6. 第五次微任务队列清空

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