“for await of”的控制流程是什么？

Question

（英语不是我的母语，所以如果你发现任何英语，请提前原谅我）

在这一点上，我对 Promises 和 Async await 函数非常满意，我也知道如何使用 Promise.all（它只是等待里面的所有 Promise 先解决，然后从所有 Promise 中提取值，然后使用带有这些值的 .then 函数返回一个数组。）

现在我想知道 for await of work 是怎么做的。

我刚刚写了这段代码：

async function f() {

  let p1 = new Promise(function (r) {
    setTimeout(r, 3000, 1)
  })

  let p2 = new Promise(function (r) {
    setTimeout(r, 2000, 2)
  })

  let p3 = new Promise(function (r) {
    setTimeout(r, 1000, 3)
  })

  let arrayOfPromises = [p1, p2, p3];

  for await (let p of arrayOfPromises) {
    let data = await p;
    console.log(data)
  }
}

f();

现在我的问题是，当它到达第一次迭代时会发生什么，它将到达一个 await 关键字，并且 await 立即返回一个待处理的承诺，那么下面的代码在技术上是否会在每次迭代中被评估为待处理的承诺？

  {
    let data = await p;
    console.log(data)
  }

所以我很困惑到底发生了什么，对于第一次迭代，setTimeout 将注册 3 秒，第二次注册 2，第一次注册 1。由于我们没有同步代码，所有的回调都会一个一个地运行，p3会先被解析，然后是p2，最后是p1！

现在直觉上我会认为一旦 p1、p2、p3 被解析，这段代码“console.log(data)”将被放入微任务队列，因为我们的 p3 先被解析，我们应该得到 3,2,1但是我们得到 1、2、3，那么我的理解中缺少什么？

（显然代码没有被放入微任务队列，它的函数可能会像生成器函数一样执行类似 .next() 的操作，但我认为这无关紧要）

似乎与 for await of 相比，第一个 Promise 将首先被记录，无论它与迭代中的其他 Promise 相比解决得有多快或多晚，那么到底发生了什么？

Answer 1

这是一个可以按照您的预期工作的代码：

async function printWhenResolved(p) { 
  const data = await p; console.log(data)
}

function createIteratorsAndBindPrinting() {   

  let p1 = new Promise(function (r) {
    setTimeout(r, 3000, 1)
  })

  let p2 = new Promise(function (r) {
    setTimeout(r, 2000, 2)
  })

  let p3 = new Promise(function (r) {
    setTimeout(r, 1000, 3)
  })

  let arrayOfPromises = [p1, p2, p3];

  for (let p of arrayOfPromises) {
    printWhenResolved(p)
  } 
  console.log('end of createIteratorsAndBindPrinting')
}
createIteratorsAndBindPrinting()

现在，从语义上讲，我认为处理看起来很清楚。在“for await (... of ...)”上，迭代一个可迭代对象，在每个点根据迭代的当前值是同步还是异步提供其值来做出决定。如果它同步提供它的值，我们立即执行“for”中的代码块。如果它异步提供它的值，我们等到提供了值，然后调用“for”中的块。

所以我们依次等待每个可迭代对象 - 然后才离开 for-block。

在我提供的代码中，我们改为在每个 Promise 上调用一个异步函数，当它解析后，会将值记录到控制台。这也是为什么您的 let data = await p 是多余的（因为您的 await 也在 for-construct 中）。

通过这种方式，async 函数是一种无需回调地狱或 then-chaining 即可组织响应式代码（即调用过程并具有例如承诺的解析的代码）的方法。这可以说允许更多的模块化、表达性和可测试性。另见https://stackoverflow.com/a/54497100/16005185

要查看与您的代码具体做什么的区别（没有冗余），请将上面的代码与以下代码进行比较：

async function createIteratorsAwaitAndPrint() {   

  let p1 = new Promise(function (r) {
    setTimeout(r, 3000, 1)
  })

  let p2 = new Promise(function (r) {
    setTimeout(r, 2000, 2)
  })

  let p3 = new Promise(function (r) {
    setTimeout(r, 1000, 3)
  })

  let arrayOfPromises = [p1, p2, p3];

  for await (let p of arrayOfPromises) {
    console.log(p)
  } 
  console.log('end of createIteratorsAwaitAndPrint')
}
createIteratorsAwaitAndPrint()

在这里，我们在 for 构造中执行 await。注意“end of [...]”日志在我们完成迭代之前不会发生。

Answer 2

这正是人们在考虑使用 async await 抽象之前必须远离或至少三思而后行的原因，因为它是对另一个抽象的抽象。

您应该做的只是停留在同步时间线中，并在您的 Promise 中附加一个.then(v => console.log(v)) 阶段，以便按照您期望的顺序打印出他们的结果。

喜欢;

var ps = Promise.all([p1,p2,p3].map(p => p.then(v => (console.log(v), v))));

在async 函数中使用for await 循环也没有多大意义。 这里不需要异步函数但即使你使用了一个那么您应该返回arrayOfPromises 数组以在同步代码中对它的值进行循环。 for await 循环在同步代码中很好用。 最近的 JS 引擎允许您使用 for await 循环，而无需在模块中声明异步函数。它需要一个异步迭代（最好但也同步）并将异步迭代中的.next()解析承诺自动转换为要在循环中处理的裸分辨率值。所以它会等到第一个数组项解决后再继续下一个，无论以下承诺是否已经解决。

现在您可以在代码的同步部分执行此操作；

for await (let v of ps){
  console.log(v);
}

它将按照数组中出现的顺序记录值。