附加不同 Promise 链时 JavaScript Promise 的执行顺序

我想检查一下promise对象通过创建一个promise并传递给其他人并让其他人附上then到它。输出与我的预期相去甚远，我不明白它是如何执行的。

const wait = time => {
  return new Promise((res, rej) => {
    setTimeout(res, time);
  });
};

const promise = wait(5000)
  .then(() => console.log('1'));

promise
  .then(() => console.log('2'))
  .then(() => console.log('3'));

promise
  .then(() => console.log('4'))
  .then(() => console.log('5'));

output:

1
2
4
3
5

我调试了代码，这是我观察到的。呼叫wait(5000)调用构造函数Promise那个叫setTimeoutAPI 通过传递res回调和Promise对象被返回。然后它开始注册所有then按相同顺序从 1 到 5。 5秒后它调用res from Promise调用承诺链的对象。

在我脑海里，thenAPI 添加了所有callbacks到一个数组或类似的东西，从 1 到 5 一次res被调用它开始调用callbacks从应该生成日志的数组中逐一（FIFO）1 2 3 4 5 not 1 2 4 3 5.

为了将它们注册到主目录，这是如何不执行的promise?

首先，当你这样做时：

promise.then(...).then(...)

附上一个.then()处理程序到promise和第二个.then()附有一个新的承诺，即第一个.then()返回。

所以，当promise解决了，第一个.then()计划在事件循环的下一个周期触发。然后，仅当第一个.then()完成后，它安排第二个.then()在事件循环的下一个刻度处触发（它不会在事件循环的此刻度处运行）。

当你这样做时：

promise
  .then(() => console.log('2'))
  .then(() => console.log('3'));

promise
  .then(() => console.log('4'))
  .then(() => console.log('5'));

然后，当promise解决，then(2) and then(4)这是仅有的两个.then()这段代码中的处理程序直接附加到promise计划在事件循环的下一个时钟周期运行。在下一个刻度时，首先then(2)运行然后then(4)运行。由于它们都附加到相同的 Promise，因此它们以 FIFO 方式运行，第一个附加的首先运行。什么时候then(2)运行，它安排then(3)在事件循环的下一个刻度处运行then(4)运行，它安排then(5)在事件循环的下一个时钟周期运行。

所以，两者之后then(2) and then(4)已经运行，在事件循环的下一个刻度处，您将看到then(3) and then(5)运行并解释了您在控制台中看到的顺序：

1
2
4
3
5

我想你对此并不感到惊讶then(1)首先运行，所以我没有将其添加到解释中。

为了将它们注册到主要承诺中，这是如何不执行的？

他们三个.then()处理程序直接附加到promise请按照它们附加的顺序运行。显然让你感到困惑的是，链式.then()处理程序不直接附加到promise，但是新的承诺promise.then()返回。

.then()返回一个新的承诺，因为它可能不会立即解决。如果回调里面.then()本身返回一个承诺，然后这个承诺.then()退货并不能立即解决。必须等到承诺.then()返回的回调也解决了。

在我看来，API 将所有回调添加到一个数组或类似的东西中，从 1 到 5，一旦调用 res，它就会开始从数组中一一调用回调（先进先出），这应该会生成日志 1 2 3 4 5 而不是1 2 4 3 5。

嗯： 1、2 和 4 确实被添加到同一个数组中.then()处理程序回调promise目的。但是，如上所述，3 和 5 是由不同的 Promise 创建的.then()他们被束缚着。所以，1、2、4都是按先进先出执行的。但是 3 和 5 被延迟到事件循环的后续滴答。