本文深入探讨JavaScript中Promise异步函数的执行机制，特别是微任务队列（PromiseJob queue）的作用。通过一个具体的代码示例，我们将逐步解析Promise的创建、`then`回调的注册与执行顺序，揭示事件循环如何调度同步代码、微任务，从而解释复杂的异步输出。
JavaScript异步编程基础与Promise
JavaScript作为单线程语言，为了处理耗时操作（如网络请求、文件读写），引入了异步编程机制。Promise是ES6引入的一种处理异步操作的强大工具，它代表了一个异步操作的最终完成（或失败）及其结果值。理解Promise的执行顺序，特别是它与JavaScript事件循环（Event Loop）和微任务队列（Microtask Queue，也称PromiseJob Queue）的交互至关重要。
事件循环是JavaScript运行时环境的核心，它协调着代码的执行。它主要包含以下组件：
调用栈（Call Stack）：执行同步代码。堆（Heap）：存储对象和函数。Web API/Node.js API：浏览器或Node.js提供的异步功能（如setTimeout、fetch、Promise等）。任务队列（Task Queue / Macrotask Queue）：存放宏任务（如setTimeout、setInterval、I/O回调）。微任务队列（Microtask Queue / PromiseJob Queue）：存放微任务（如Promise的then/catch/finally回调、queueMicrotask）。
事件循环的优先级是：同步代码 > 微任务 > 宏任务。这意味着，当调用栈清空后，事件循环会优先清空微任务队列中的所有任务，然后才从宏任务队列中取出一个任务执行。
立即学习“Java免费学习笔记（深入）”；
Promise then() 方法的关键行为
在深入分析代码之前，需要明确Promise的两个关键行为：
当一个Promise被解决（fulfilled或rejected）时，其上注册的任何then回调（如果存在）都会被放入微任务队列（PromiseJob queue）中。调用then()方法时，它总是会返回一个新的Promise，并且这个新的Promise在then回调执行完成之前，其状态始终是pending。即使then()是在一个已解决的Promise上调用，返回的Promise也需要等待其回调执行完毕才能决定自己的状态。
代码示例与执行分析
为了更好地理解Promise的执行顺序，我们使用以下代码示例。此代码与原始问题中的逻辑相同，但为了便于追踪，我们为每个Promise和回调函数进行了命名。
var a = Promise.resolve(); // Promise 'a' 立即解决var b = a.then(function a_then() { // 'a_then' 回调注册到 Promise 'a' console.log(1); var c = Promise.resolve(); // Promise 'c' 立即解决 var d = c.then(function c_then() { // 'c_then' 回调注册到 Promise 'c' console.log(2); }); var e = d.then(function d_then() { // 'd_then' 回调注册到 Promise 'd' console.log(3); }); console.log(4);});var f = b.then(function b_then() { // 'b_then' 回调注册到 Promise 'b' console.log(5); var g = Promise.resolve(); // Promise 'g' 立即解决 var h = g.then(function g_then() { // 'g_then' 回调注册到 Promise 'g' console.log(6); }); var i = h.then(function h_then() { // 'h_then' 回调注册到 Promise 'h' console.log(7); }); console.log(8);});console.log(9);
我们将通过一个逐步的事件序列来解析这段代码的执行流程，重点关注同步执行、微任务队列的变化以及Promise状态的转换。
详细执行步骤
同步代码执行阶段
a = Promise.resolve(): Promise a 被创建并立即解决（fulfilled）。b = a.then(function a_then() { … }):then方法被调用，返回一个处于pending状态的Promise b。由于Promise a 已经解决，a_then回调被添加到微任务队列。微任务队列: [a_then]f = b.then(function b_then() { … }):then方法被调用，返回一个处于pending状态的Promise f。由于Promise b 仍处于pending状态，b_then回调不会立即添加到队列，而是等待b解决。微任务队列: [a_then]console.log(9): 同步执行，输出 9。此时，主脚本同步代码执行完毕，调用栈清空。
事件循环处理微任务阶段
事件循环从微任务队列中取出第一个任务 a_then 并执行。
执行 a_then 回调:
console.log(1): 输出 1。c = Promise.resolve(): Promise c 被创建并立即解决。d = c.then(function c_then() { … }):返回一个pending状态的Promise d。由于Promise c 已解决，c_then 回调被添加到微任务队列。微任务队列: [c_then]e = d.then(function d_then() { … }):返回一个pending状态的Promise e。Promise d 仍pending，d_then 等待d解决。微任务队列: [c_then]console.log(4): 输出 4。a_then 回调执行完毕，它没有显式返回值，默认返回 undefined，这会使得Promise b 解决（fulfilled）。由于Promise b 解决，其上注册的 b_then 回调被添加到微任务队列。微任务队列: [c_then, b_then]
事件循环从微任务队列中取出 c_then 并执行。
执行 c_then 回调:
console.log(2): 输出 2。c_then 回调执行完毕，使得Promise d 解决。由于Promise d 解决，其上注册的 d_then 回调被添加到微任务队列。微任务队列: [b_then, d_then]
事件循环从微任务队列中取出 b_then 并执行。
执行 b_then 回调:
console.log(5): 输出 5。g = Promise.resolve(): Promise g 被创建并立即解决。h = g.then(function g_then() { … }):返回一个pending状态的Promise h。由于Promise g 已解决，g_then 回调被添加到微任务队列。微任务队列: [d_then, g_then]i = h.then(function h_then() { … }):返回一个pending状态的Promise i。Promise h 仍pending，h_then 等待h解决。微任务队列: [d_then, g_then]console.log(8): 输出 8。b_then 回调执行完毕，使得Promise f 解决。微任务队列: [d_then, g_then]
事件循环从微任务队列中取出 d_then 并执行。
执行 d_then 回调:
console.log(3): 输出 3。d_then 回调执行完毕，使得Promise e 解决。微任务队列: [g_then]
事件循环从微任务队列中取出 g_then 并执行。
执行 g_then 回调:
console.log(6): 输出 6。g_then 回调执行完毕，使得Promise h 解决。由于Promise h 解决，其上注册的 h_then 回调被添加到微任务队列。微任务队列: [h_then]
事件循环从微任务队列中取出 h_then 并执行。
执行 h_then 回调:
console.log(7): 输出 7。h_then 回调执行完毕，使得Promise i 解决。微任务队列: [] (清空)
最终输出顺序
根据上述分析，最终的控制台输出顺序为：9, 1, 4, 2, 5, 8, 3, 6, 7
这与问题中用户观察到的输出顺序完全一致。
总结与注意事项
同步优先：JavaScript总是优先执行所有同步代码，直到调用栈清空。微任务优先级：在同步代码执行完毕后，事件循环会立即清空微任务队列中的所有任务，然后才处理宏任务。这意味着Promise的回调（微任务）比setTimeout等（宏任务）有更高的优先级。链式then的特性：Promise.resolve().then(…) 中的then回调会被立即加入微任务队列。pending状态的Promise调用then时，其回调会等待Promise解决后才加入微任务队列。then()方法本身总是返回一个新的Promise，这个新Promise的状态取决于then回调的执行结果。嵌套Promise：当Promise回调内部又创建了新的Promise并注册then回调时，这些新的回调也会根据其父Promise的状态，被添加到微任务队列中，并等待事件循环调度。
理解这些核心概念对于编写可预测且高效的异步JavaScript代码至关重要。通过对事件循环、微任务队列和Promise状态转换的深入理解，开发者可以更好地掌握异步流程控制，避免常见的并发问题。
以上就是深入理解JavaScript Promise异步执行顺序与微任务队列的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539522.html
微信扫一扫 
支付宝扫一扫 
