javascript - 解决 promise 中的 promise 顺序

Question

对于下面的代码

function inner () {
  new Promise(function(resolve,reject){
    resolve()
  }).then(function(){
    console.log('Inner Promise')
  })
}
function outer() {
  return new Promise(function(resolve, reject){
    resolve()
    inner()
  })
}

outer().then(function(data) {
  console.log('Outer Promise')
})

输出是

Inner Promise
Outer Promise

我认为外部解析将是第一个进入JS Message Queue的内部解析。
但是，JS事件循环会先触发内部解析，然后再触发外部解析。

Promise解决内部做什么？

Answer 1

简而言之，您会看到所看到的行为，因为.then() promise 上的inner()方法首先在.then() promise 上的outer()方法之前运行，因此它的处理程序首先进入了队列(请参阅下面的逐步说明以了解这是为什么)。

What does Promise resolve do internally?

resolve()将 promise 的内部状态更改为Fulfilled。那时，如果已将任何 .then()处理程序附加到Promise，则将它们添加到队列中，以便在堆栈展开并且Javascript的当前运行路径完成时将其执行，并将控制权返回给系统。请注意，在这种情况下(当您阅读下面的逐步分析时，您将看到)，如果还没有注册任何 .then()处理程序，则什么都不能添加到队列中。

I thought the outer resolve would be the first to enter the JS Message Queue followed by the inner resolve. However the JS Event Loop fires the Inner resolve first then followed by Outer resolve.

promise 解决操作未添加到队列中。 resolve()是同步的。它将当前 promise 的状态立即更改为已实现状态。如果在兑现 promise 时已经注册了任何 .then()处理程序，那么它们就是添加到队列中的内容。但是，在您的两个 promise 中，当您的每个 promise 都得到解决时，尚没有 .then()处理程序附加。因此，这些 .then()处理程序不会在应许解决的时候排队。相反，当 .then()方法实际运行并注册它们时，它们将在以后排队。

以下是对代码运行方式的分析以及可能的解释:

首先，您调用outer()。这将创建一个Promise对象，并在您传递该对象时同步调用Promise执行程序回调。

该回调调用resolve()，它将使当前附加的.then()处理程序的调用排队。请注意，目前您调用resolve()，尚无.then()处理程序，因为在此代码outer().then()中，您仍在运行outer()和.then()尚未运行，因此实际上还没有任何要排队的内容(这可能是您观察到的订购的关键-请继续阅读以获取更多详细信息)。

然后，代码调用inner()。这将创建一个新的Promise，然后(仍在同步运行)调用您传递给它的Promise执行程序回调，该回调调用resolve()。同样，还没有附加任何.then()处理程序，因此尚无其他安排将来执行。

现在，inner()内的Promise执行程序返回，并且对.then()内的promise调用inner()方法。该 promise 已经解决，因此，当调用此.then()处理程序时，该 promise 知道将其安排在将来运行。由于当堆栈只解开平台代码时，所有.then()处理程序都被异步调用，因此它不会立即运行，而是计划将其放在队列中以在将来运行。这完全取决于实现方式，该队列的工作方式(宏任务或微任务等)，但是我们知道Promise规范可以保证它在当前正在执行的同步JS代码片段完成运行并返回控制后运行回到系统。

现在inner()返回(代码仍在同步运行)。

现在outer()返回，并且.then()中的outer().then()方法运行。就像在前面的示例中一样，当调用此.then()方法时，主机 promise 已经解析。因此，promise引擎会通过将.then()处理程序回调添加到队列中来安排其运行。

如果步骤4和6中的这两个.then()处理程序按照它们的运行顺序进行排队(这是逻辑实现)，那么您会看到.then()上的inner()处理程序首先运行，然后.then()上的outer()处理程序将运行，因为inner().then() ran first before external()。then()`。那就是你观察到的。

即使在解决outer()之前先解决inner()，但在解决outer()时，没有附加.then()处理程序，因此解决该问题时无需安排任何将来执行的计划。这可能是为什么即使先解决它的.then()处理程序也不先运行的原因。一旦inner()和outer()都解决了，它是内部的.then()方法首先运行，因此在安排.then()处理程序运行时首先遇到了麻烦，这就是您所观察到的。

您可以通过阅读和研究这些引用资料来了解正在发生的事情:

What is the order of execution in javascript promises

Difference between microtask and macrotask within an event loop context。

如果您想更明确地指定内部 .then()处理程序将首先触发，则可以将其链接到 outer() promise ，如下所示:

function inner () {
  return new Promise(function(resolve,reject){
    resolve();
  }).then(function(){
    console.log('Inner Promise')
  })
}
function outer() {
    // Add return here to chain the inner promise
    // make to make sure that outer() does not resolve until
    // inner() is completely done
    return inner();
}

outer().then(function(data) {
  console.log('Outer Promise')
})

如果您想保证首先调用了 outer().then()处理程序，则必须选择其他结构，因为该结构不会以任何方式强制执行这种类型的订单，并且除非您有意识地延迟了运行的时间，否则无法使该方向困惑 inner()(使用 setTimeout()或类似的东西)或重组代码。例如，如果您确实想进行重组以强制 inner()最终运行，则可以在 outer().then()处理程序中将其启动，如下所示:

function inner () {
  return new Promise(function(resolve,reject){
    resolve()
  }).then(function(){
    console.log('Inner Promise')
  })
}
function outer() {
  return new Promise(function(resolve, reject){
    resolve()
  })
}

outer().then(function(data) {
  console.log('Outer Promise')
  return inner();
})