深入理解J*aScript Promise异步执行与微任务队列_寅奏圩（云南）信息咨询有限公司

分类

深入理解J*aScript Promise异步执行与微任务队列2025-12-01 13:37: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

相关栏目：【企业资讯168 】【行业动态20933 】【网络营销52431 】【网络学院91036 】【运营推广7012 】【科技资讯60970 】

分享到：

上一篇：高德地图总提示网络异常怎么办高德地图离线导航设置与网络排查方法

下一篇：163邮箱注册官网免费申请163个人邮箱

快速导航×

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

示例代码分析

逐步执行流程解析

总结与注意事项