深入理解J*aScript Promise异步执行与微任务队列_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

深入理解J*aScript Promise异步执行与微任务队列

2025-12-01

浏览次数：次

返回列表

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

本文深入探讨j*ascript中promise的异步执行机制，特别是其与事件循环和微任务队列的交互。通过一个具体代码示例，我们将逐步分析promise链中`then`回调函数的入队、出队及执行顺序，揭示`console.log`输出背后的原理，帮助开发者掌握promise的执行时序。

J*aScript异步编程基石：Promise与微任务队列

在J*aScript中，异步操作是常态，而Promise是处理这些异步操作的核心工具之一。理解Promise的执行顺序，尤其是其如何与J*aScript的事件循环机制（Event Loop）中的微任务队列（Microtask Queue，也常被称为PromiseJob Queue）交互，对于编写高效、可预测的异步代码至关重要。

核心概念回顾：

事件循环 (Event Loop): J*aScript运行时环境（如浏览器或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。

示例代码分析

我们将通过以下J*aScript代码来详细分析Promise的执行顺序。为了便于追踪，我们对原始代码进行了少量修改，为每个Promise和回调函数赋予了名称，但这不改变其核心逻辑和输出结果。

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

逐步执行流程解析

我们将模拟J*aScript事件循环的执行过程，追踪主线程（同步代码）、微任务队列（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);
  - 同步代码执行，输出 9。
当前状态:
ChatGPT Writer
免费 Chrome 扩展程序，使用 ChatGPT AI 生成电子邮件和消息。
106 查看详情
- 输出: 9
- 微任务队列: [a_then]
事件循环第一次迭代：清空微任务队列
- 主线程同步代码执行完毕，事件循环开始处理微任务队列。
- 从微任务队列中取出 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]
事件循环第二次迭代：清空微任务队列
- 从微任务队列中取出 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]
事件循环第三次迭代：清空微任务队列
- 从微任务队列中取出 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]
事件循环第四次迭代：清空微任务队列
- 从微任务队列中取出 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]
事件循环第五次迭代：清空微任务队列
- 从微任务队列中取出 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]
事件循环第六次迭代：清空微任务队列
- 从微任务队列中取出 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链执行顺序的关键。

掌握这些原理，将帮助您更好地预测和调试J*aScript异步代码，避免常见的异步陷阱。在实际开发中，合理组织Promise链和理解其背后的事件循环机制，是编写健壮、高性能应用的基础。

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

# 返回值 # 盐田工厂网站建设流程 # 株洲seo # 进行网站推广例子 # 内页改关键词后排名 # app要做seo嘛 # 泰安优化网站效果图设计 # 爆款营销推广词语大全集 # 网站建设及优化的技巧 # 大白seo博客 # 福田小企业网站推广方式 # 弹出 # 加载 # 列表中 # 表单 # javascript # 迭代 # 才会 # 待定 # 清空 # 回调 # 异步任务 # mac # 工具 # 回调函数 # 浏览器 # node # node.js # js # java