深入理解JavaScript Promise的执行顺序：多链并发场景解析

JavaScript事件循环与Promise微任务

在深入探讨promise执行顺序之前，理解javascript的事件循环（event loop）和微任务队列（microtask queue）至关重要。javascript是单线程的，但通过事件循环机制实现非阻塞i/o和其他异步操作。当一个promise状态变为fulfilled或rejected时，其对应的.then()、.catch()或.finally()回调并不会立即执行，而是被添加到微任务队列中。事件循环会在当前宏任务（如脚本执行）完成后，以及在下一个宏任务开始之前，清空并执行微任务队列中的所有任务。

Promise链内部的确定性顺序

当处理单个Promise链时，其内部的执行顺序是严格确定的。例如：

Promise.resolve()
  .then(() => console.log(1))
  .then(() => console.log(2))
  .then(() => console.log(3));

在这个例子中，console.log(1)、console.log(2)和console.log(3)将始终按照1 -> 2 -> 3的顺序输出。这是因为第一个.then()回调执行完毕后，才会将第二个.then()回调添加到微任务队列，以此类推。这种机制保证了Promise链的顺序性。

多个独立Promise链的非确定性执行

然而，当存在多个独立的Promise链时，它们之间的相对执行顺序可能变得不确定。考虑以下代码示例：

Promise.resolve()
  .then(() => console.log(1))
  .then(() => console.log(2))
  .then(() => console.log(3));

Promise.resolve()
  .then(() => console.log(11))
  .then(() => console.log(12));

Promise.resolve()
  .then(() => console.log(111))
  .then(() => console.log(122));

在这个场景中，我们有三个独立的Promise链。当主脚本执行到这三行Promise.resolve()时，它们会立即将各自的第一个.then()回调（即打印1、11、111的回调）添加到微任务队列中。

立即学习“Java免费学习笔记（深入）”；

关键点在于：

1. 微任务入队顺序： 这些初始的微任务（console.log(1)、console.log(11)、console.log(111)）几乎在同一时刻被添加到微任务队列。虽然通常情况下它们会按照源代码的声明顺序入队，但JavaScript引擎规范并未严格保证这种入队顺序在所有实现中都保持一致。
2. 微任务出队顺序： 事件循环会从微任务队列中取出并执行任务。虽然通常是先进先出（FIFO），但如果多个任务在逻辑上是并发入队的，其具体的出队和执行顺序可能因引擎实现、优化策略或运行时环境的微小差异而有所不同。

因此，你可能会观察到像1, 11, 111, 2, 12, 122, 3这样的输出，也可能观察到其他合法的排列组合。例如：

• 1, 11, 111, 2, 12, 122, 3：表明引擎可能倾向于先处理所有链的第一个微任务，再处理所有链的第二个微任务，依此类推。
• 1, 2, 3, 11, 12, 111, 122：表明引擎可能倾向于完全执行完一个链，再执行下一个链。
• 以及其他多种组合，只要满足每个链内部的顺序（如1在2之前，11在12之前，111在122之前）。

这解释了为什么对于上述代码，输出结果并非总是可预测的，并且存在多种可能的有效排列。

AI Sofiya

一款AI驱动的多功能工具

103

查看详情

核心规则总结

为了更好地理解Promise的执行顺序，我们可以总结以下规则：

• 链内顺序保证： 在同一个Promise链中，.then()、.catch()或.finally()回调的执行顺序是严格按照它们在链中声明的顺序进行的。例如，p.then(A).then(B)，A总在B之前执行。
• 链间非确定性： 多个独立的Promise链（即不是由同一个Promise派生出来的链）之间的相对执行顺序是不确定的。它们的第一个.then()回调会作为独立的微任务被添加到队列中，而这些独立微任务的执行顺序可能因JavaScript引擎实现而异。
• 微任务优先级： 微任务队列中的任务会在当前宏任务执行完毕后，下一个宏任务开始前被清空。这意味着所有同步代码执行完毕后，才会开始处理微任务。

实际应用与注意事项

鉴于上述非确定性，在开发中应遵循以下原则：

1. 避免依赖独立Promise链的精确交错顺序： 如果你的业务逻辑需要严格的执行顺序，切勿依赖多个独立Promise链的自然交错。

2. 明确管理依赖关系：

   • 串行执行： 如果一个操作必须在另一个操作完成后才能开始，应将它们明确地链接起来，形成一个Promise链。
   • 并行执行并等待所有完成： 如果多个操作可以并行执行，但你需要在所有操作完成后才能继续，使用Promise.all()。
   • 并行执行并等待最快完成： 如果你只需要等待多个操作中最快完成的一个，使用Promise.race()。
   • 使用 async/await： async/await是基于Promise的语法糖，它能使异步代码看起来更像同步代码，从而更容易推理执行顺序。

   // 示例：使用 async/await 明确顺序
   async function executeSequentially() {
     await Promise.resolve().then(() => console.log(1));
     await Promise.resolve().then(() => console.log(11));
     await Promise.resolve().then(() => console.log(111));
     // 此时，1, 11, 111 已经输出
     console.log('All initial tasks done');
   }
   
   // 示例：使用 Promise.all 明确等待
   Promise.all([
     Promise.resolve().then(() => console.log(1)),
     Promise.resolve().then(() => console.log(11)),
     Promise.resolve().then(() => console.log(111))
   ]).then(() => {
     console.log('All initial tasks done');
   });

   登录后复制

3. 理解“编译器”与“运行时”： 这种行为并非“编译器”决定，而是JavaScript运行时环境（事件循环、微任务队列）的工作方式。JavaScript引擎在解析代码时，会将Promise.resolve().then(...)视为创建Promise并注册回调的操作，这些回调在适当的时机被调度到微任务队列。

总结

JavaScript Promise的执行顺序是一个结合了同步代码、事件循环和微任务队列的复杂机制。理解其核心在于区分链内顺序的确定性与链间顺序的非确定性。在一个Promise链中，回调是严格按顺序执行的；然而，当存在多个独立的Promise链时，它们的第一个then回调作为独立的微任务被添加到队列，其相对执行顺序是不保证的。在实际开发中，务必通过明确的Promise链式调用、Promise.all()、Promise.race()或async/await来管理异步操作的依赖关系和执行顺序，以确保代码的健壮性和可预测性。

以上就是深入理解JavaScript Promise的执行顺序：多链并发场景解析的详细内容，更多请关注php中文网其它相关文章！