深入理解JavaScript Promise链式调用的执行顺序

JavaScript Promise与微任务队列

在深入探讨具体问题之前，理解javascript的事件循环（event loop）和微任务队列（microtask queue）至关重要。当一个promise状态变为fulfilled或rejected时，其对应的.then()、.catch()或.finally()回调函数会被添加到微任务队列中。事件循环在每次执行完当前同步代码后，会检查并清空微任务队列，然后才处理宏任务队列（如settimeout、setinterval等）。

对于Promise.resolve()，它会立即返回一个已解决的Promise。紧随其后的.then()回调会被立即安排到微任务队列中。

独立Promise链的执行顺序之谜

考虑以下JavaScript代码片段，其中包含三个独立的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));

许多开发者可能会预期一个特定的输出顺序，例如1, 11, 111, 2, 3, 12, 122，但实际运行时可能会得到如1, 11, 111, 2, 12, 122, 3等不同的结果。这种差异源于对微任务队列处理机制的误解。

核心问题在于： 尽管每个Promise.resolve().then()调用都会将第一个回调推入微任务队列，但这些独立的Promise.resolve()语句在主线程中的执行顺序（即它们被推入微任务队列的顺序）是确定的。然而，一旦它们进入微任务队列，它们的相对执行顺序就变得不确定。JavaScript引擎在清空微任务队列时，会按照它们被添加的顺序执行。但是，当一个回调执行完毕后，它可能又会产生新的微任务（例如，.then()返回的Promise解决后，下一个.then()的回调会被推入队列），这些新的微任务会插入到当前微任务队列的末尾。

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

深入解析执行机制

让我们分解上述代码的执行流程：

1. 同步代码执行：

   • 第一个Promise.resolve().then(() => console.log(1))执行，将console.log(1)推入微任务队列。
   • 第二个Promise.resolve().then(() => console.log(11))执行，将console.log(11)推入微任务队列。
   • 第三个Promise.resolve().then(() => console.log(111))执行，将console.log(111)推入微任务队列。 此时，微任务队列可能包含 [log(1), log(11), log(111)]。

2. 清空微任务队列（第一次）：

   • 执行 log(1)。输出 1。log(1)执行完毕后，它所在的Promise链中的下一个回调log(2)被推入微任务队列末尾。
   • 执行 log(11)。输出 11。log(11)执行完毕后，它所在的Promise链中的下一个回调log(12)被推入微任务队列末尾。
   • 执行 log(111)。输出 111。log(111)执行完毕后，它所在的Promise链中的下一个回调log(122)被推入微任务队列末尾。 此时，微任务队列可能包含 [log(2), log(12), log(122)]。

3. 清空微任务队列（第二次）：

   

   钉钉 AI 助理

   钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

   21

   查看详情
   • 执行 log(2)。输出 2。log(2)执行完毕后，它所在的Promise链中的下一个回调log(3)被推入微任务队列末尾。
   • 执行 log(12)。输出 12。
   • 执行 log(122)。输出 122。 此时，微任务队列可能包含 [log(3)]。

4. 清空微任务队列（第三次）：

   • 执行 log(3)。输出 3。

最终输出：1, 11, 111, 2, 12, 122, 3。这与问题中观察到的输出一致。

关键规则总结：

• 链内顺序保证： 在同一个Promise链中，回调的执行顺序是严格保证的（例如，1总是在2之前，2总是在3之前）。
• 链间顺序不保证： 不同的独立Promise链之间，其回调的执行顺序是不确定的。这种不确定性源于微任务队列的动态特性：当一个微任务执行完毕后，它可能会立即将新的微任务推入队列末尾，从而影响后续微任务的相对顺序。

验证多种可能结果

为了更直观地理解这种非确定性，我们可以编写一个简单的脚本来模拟并验证所有符合内部链式顺序的可能排列组合。这表明，虽然每个链内部的顺序是固定的，但不同链之间回调的交错执行可以产生多种有效结果。

以下是一个简化版的验证逻辑，它不直接模拟微任务队列，而是通过定义规则来过滤所有可能的排列：

const sequence = [1, 2, 3, 11, 12, 111, 122];

// 定义Promise链内部的顺序规则
const rules = [
  // 1st Promise chain: 1 -> 2 -> 3
  { type: 'condition', operator: 'gt', left: 2, right: 1 },
  { type: 'condition', operator: 'gt', left: 3, right: 2 },
  // 2nd Promise chain: 11 -> 12
  { type: 'condition', operator: 'gt', left: 12, right: 11 },
  // 3rd Promise chain: 111 -> 122
  { type: 'condition', operator: 'gt', left: 122, right: 111 }
];

// 辅助函数：检查一个排列是否满足所有规则
const validate = (currentSequence, rules) => {
  return rules.every(rule => {
    const indexLeft = currentSequence.indexOf(rule.left);
    const indexRight = currentSequence.indexOf(rule.right);
    if (rule.operator === 'gt') { // 'greater than' means 'appears after'
      return indexLeft > indexRight;
    } else if (rule.operator === 'lt') { // 'less than' means 'appears before'
      return indexLeft < indexRight;
    }
    return false;
  });
};

// 辅助函数：生成所有排列组合 (此处省略具体实现，通常使用递归)
// 假设 permutator(sequence) 返回所有可能的排列数组
const permutator = (arr) => {
  const result = [];
  // 递归生成排列的逻辑...
  function permute(currentArr, m = []) {
    if (currentArr.length === 0) {
      result.push(m);
    } else {
      for (let i = 0; i < currentArr.length; i++) {
        const next = currentArr.slice();
        const curr = next.splice(i, 1);
        permute(next, m.concat(curr));
      }
    }
  }
  permute(arr);
  return result;
};

const main = () => {
  const allPermutations = permutator(sequence);
  const validPermutations = allPermutations.filter(p => validate(p, rules));

  console.log('符合规则的有效排列数量:', validPermutations.length);
  // validPermutations.forEach((p, i) => {
  //   console.log(`Permutation #${i + 1}: ${JSON.stringify(p).replace(/,/g, ', ')}`);
  // });
};

main();

这个验证脚本的目的是证明，在遵守每个Promise链内部顺序的前提下，存在多种可能的全局执行顺序。这意味着，如果你的业务逻辑依赖于不同Promise链之间的精确顺序，那么这种依赖是不可靠的。

注意事项与最佳实践

1. 不要依赖独立Promise链的宏观顺序： 如果你的代码中存在多个像Promise.resolve().then(...)这样的独立链，并且你期望它们之间有特定的执行顺序，那么这种假设是错误的。
2. 明确控制执行顺序：
   • 串行执行： 如果你需要严格的串行顺序，请将Promise链显式地连接起来：

     Promise.resolve()
       .then(() => console.log(1))
       .then(() => console.log(2))
       .then(() => console.log(3))
       .then(() => console.log(11)) // 确保在1,2,3之后执行
       .then(() => console.log(12));

     登录后复制
   • 并行等待所有完成： 如果你希望所有Promise都完成后再执行某个操作，可以使用Promise.all()：

     Promise.all([
       Promise.resolve().then(() => console.log(1)).then(() => console.log(2)),
       Promise.resolve().then(() => console.log(11)).then(() => console.log(12)),
     ]).then(() => {
       console.log("所有链都已完成");
     });

     登录后复制
   • 使用 async/await： async/await是处理Promise的语法糖，它能让异步代码看起来更像同步代码，从而更容易控制执行流程。

     async function executeTasks() {
       await Promise.resolve().then(() => console.log(1));
       await Promise.resolve().then(() => console.log(11)); // 11会在1之后执行
       // ...
     }
     executeTasks();

     登录后复制

     请注意，await关键字会暂停当前async函数的执行，直到被等待的Promise解决。

总结

JavaScript Promise的链式调用机制为异步编程提供了强大的工具，但其执行顺序并非总是直观。理解事件循环和微任务队列的工作原理是掌握Promise的关键。虽然单个Promise链内部的执行顺序是确定的，但多个独立Promise链之间的宏观执行顺序是不确定的。为了避免潜在的竞态条件和不可预测的行为，开发者应始终显式地控制Promise的执行顺序，尤其是在存在相互依赖的异步操作时。通过合理使用Promise.all()、async/await或显式链式调用，可以确保代码按照预期逻辑执行，从而提高程序的健壮性和可维护性。

以上就是深入理解JavaScript Promise链式调用的执行顺序的详细内容，更多请关注php中文网其它相关文章！