本文深入探讨javascript中promise的异步执行机制，特别是其与事件循环和微任务队列的交互。通过一个具体代码示例，我们将逐步分析promise链中`then`回调函数的入队、出队及执行顺序，揭示`console.log`输出背后的原理，帮助开发者掌握promise的执行时序。
JavaScript异步编程基石：Promise与微任务队列
在JavaScript中，异步操作是常态，而Promise是处理这些异步操作的核心工具之一。理解Promise的执行顺序，尤其是其如何与JavaScript的事件循环机制（Event Loop）中的微任务队列（Microtask Queue，也常被称为PromiseJob Queue）交互，对于编写高效、可预测的异步代码至关重要。
核心概念回顾：
事件循环 (Event Loop): JavaScript运行时环境（如浏览器或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。
示例代码分析
我们将通过以下JavaScript代码来详细分析Promise的执行顺序。为了便于追踪，我们对原始代码进行了少量修改，为每个Promise和回调函数赋予了名称，但这不改变其核心逻辑和输出结果。
立即学习“Java免费学习笔记（深入）”；
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
逐步执行流程解析
我们将模拟JavaScript事件循环的执行过程，追踪主线程（同步代码）、微任务队列（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。
当前状态:
输出: 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链执行顺序的关键。
掌握这些原理，将帮助您更好地预测和调试JavaScript异步代码，避免常见的异步陷阱。在实际开发中，合理组织Promise链和理解其背后的事件循环机制，是编写健壮、高性能应用的基础。
以上就是深入理解JavaScript Promise异步执行与微任务队列的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539399.html
微信扫一扫 
支付宝扫一扫 
