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

新闻中心 NEWS CENTER

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

理解J*aScript Promise的微任务队列与执行顺序

2025-12-01

浏览次数：次

返回列表

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

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

J*aScript异步编程与事件循环

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

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

Promise核心机制解析

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

Promise状态：
- pending（待定）：初始状态，既不是成功也不是失败。
- fulfilled（已成功）：操作成功完成。
- rejected（已失败）：操作失败。
- Promise的状态一旦从pending变为fulfilled或rejected，就不能再改变，这个过程称为“解决”（settled）。
Promise.resolve()：
- 这个方法返回一个已经状态为fulfilled的Promise对象。如果传入的值本身就是一个Promise，则直接返回该Promise。
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和回调函数赋予明确的名称，但这不改变其逻辑和输出结果：

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);

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

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

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

4 查看详情 Pascal基础教程 Pascal入门必备基础教程 CHM版

执行流程分析

同步代码执行阶段：
- 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
第一次微任务队列清空：
- 事件循环检测到同步代码执行完毕，开始清空微任务队列。
- 取出并执行 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
第二次微任务队列清空：
- 取出并执行 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
第三次微任务队列清空：
- 取出并执行 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
第四次微任务队列清空：
- 取出并执行 d_then 回调函数：
  - console.log(3);：输出 3。
  - d_then 回调函数执行完毕。Promise e 会以 undefined 为值被解决（fulfilled状态）。
- 当前微任务队列：[g_then]。
- 输出：9, 1, 4, 2, 5, 8, 3
第五次微任务队列清空

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

# 计算机语言 # 网络营销新产品推广ppt模板 # 通州区好的网站建设单价 # 泉州零基础网站建设 # tiktok营销推广 # 淮安seo优化招商 # 网站seo优化服务一年多少钱 # 唐山营销推广团队招聘信息 # 北京现代网站建设配置 # 丹东网站关键词排名 # 整站优化高粱seo仁 # 返回值 # javascript # 链式 # 弹出 # 加载 # 它会 # 会以 # 表单 # 清空 # 回调 # mac # 回调函数 # java

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：J*aScript map 方法中处理循环元素为空数组的策略

下一篇：MAC怎么让Dock栏只显示当前运行的应用_MAC终端命令实现极简Dock栏

首页

关于我们

产品展示

咨询研究

新闻中心

留言板