我们的 await 关键字在 for await of 循环中的行为与普通异步函数中的行为有何不同？

Question

这是一个简单的异步函数：

async function f(){

    let data = await (new Promise(r => setTimeout(r, 1000, 200)));
    
    console.log(data)
     
    return data + 100;   
}

f()

console.log('me first');

以下是该计划中将要发生的事情：

1. f() 将被调用
2. 它进入 f 执行上下文并运行 await 表达式 - 由于函数调用的优先级高于 await 关键字，我们的新 Promise() 函数将首先运行，该函数将立即返回一个待处理的 Promise，然后等待关键字将起作用.
3. 我们设置了一个计时器，它将在 1 秒后解决我们的承诺
4. 由于尚未解决，await 将返回一个待处理的 Promise，我们会从当前执行上下文中跳出一层，这恰好是我们开始执行全局代码的全局执行上下文。
5. 我们点击“console.log('me first')”行并记录“me first”
6. 现在 1 秒后，我们的 promise 已经解决，这意味着我们的 await 表达式后面的所有代码都将被放入一个容器中，并放入微任务队列中，以便在下一次执行时执行！ （在底层它可能会调用 .next() 方法，就像生成器函数一样，但我们不要深入探讨）
7. 我们的同步代码已完成，我们的微任务队列中有一个任务，我们将其放入调用堆栈以运行！
8. 它运行，一旦我们回到我们的异步函数，它就会从它离开的地方开始，即等待表达式。
9. 由于我们的 promise 现在已解决，我们的 await 关键字将从已解决的 promise 中提取值并将其分配给变量 d。
10. 我们将该值记录到下一行。
11. 最后，在最后一行，我们从 async 函数返回值 + 100，这意味着我们之前返回的待处理承诺（如第 4 行中所述）使用该值解决，即 300！

如您所见，此时我对异步等待非常满意！ 现在这是我们等待迭代的代码！

    async function f(){

        
        let p1 = new Promise(function (r){
            setTimeout(r, 2000, 1)
        })
        let p2 = new Promise(function (r){
            setTimeout(r, 1000, 2)
        })
        let p3 = new Promise(function (r){
            setTimeout(r, 500, 3)
        })
     
        let aop = [p1, p2, p3];
        
        for await (let elem of aop ){
            
            let data = await elem;
            console.log(data)
        }
        
    }    

f()
    
    console.log('global');

现在直观地说，假设 await 的行为与我们之前的 async 函数中的行为相同，您会期望这种情况发生！

1. f() 被调用
2. 我们创建了三个 Promise p1、p2、p3
3. p1 将在 2 秒后解析，p2 在 1 秒后解析，p3 在 500 m/s 后解析
4. 我们将这些 Promise 放在一个名为 aop 的数组中（因为 for 可以使用具有 Symbol.iterator 作为属性的对象，并且所有数组都具有该属性。）
5. 现在这就是我觉得棘手的地方！
6. 我们将遍历每个元素，对于第一个元素，我们进入循环并立即等待我们的第一个元素，即我们的第一个承诺 p1。
7. 由于它还没有解决，它会像我们之前的示例一样返回一个待处理的承诺，或者是吗？
8. 对于其他两个 Promise，p2 和 p3 也会发生同样的情况，返回更多两个待处理的 Promise。
9. 我们的异步函数完成了，我们在全局执行中再往外一层，打印出 global：console.log('global');
10. 此时，我们的 p3 承诺已经解决，因为它应该只需要 500 毫秒才能完成，所以它首先解决了！接着！也许在那之后我们留下的任何代码（console.log(data)）都会被放入微任务队列以供以后执行？
11. 按照这个逻辑，它应该打印 3，因为我们的最后一个承诺首先解决，然后是 2，然后是 1，但它打印 1、2、3！ 那么我在写作中遗漏了哪些关键点？ 因为 await 显然是并行的，所以它会遍历每个元素而不等待第一个元素完成，那么为什么它会这样工作？

Answer 1

当你得到一个承诺时，for await 循环有特殊的行为。

记住 - 承诺是价值 - 一旦你有一个承诺，创建该承诺的动作（在这种情况下设置计时器）已经发生。承诺就是该行动的价值+时间。

这里发生的实际上是：

• 您将您的一系列承诺（只是已开始操作的结果）传递给for...await。
• 由于该数组没有Symbol.asyncIterator - 循环检查它是否有Symbol.iterator。由于数组是可迭代的并且具有该符号 - 它被调用。
• for... await 循环检查每个返回值是否是一个承诺 - 如果是，它会在继续循环之前等待它。

由于这些值是承诺 - 它们将被排序（也就是说，只有在前一个 .next 调用返回的承诺已解决后，才会在从 [p1, p2, p3][Symbol.iterator]() 返回的迭代器上调用 .next()。

---

注意：

• 您使用的是resolved，但意思是settled 或fulfilled。

Answer 2

我无法谈论每个引擎（甚至是 polyfill）中作业的具体实现，但创建 Promise 不应该将代码推送到单独的堆栈中。 await 机制应该可以做到这一点。

因为我们谈论的是常规迭代。代码应该与以下内容没有太大不同：

console.log(await p1);
console.log(await p2);
console.log(await p3);

精确的语义，当然不完全一样。迭代器仍然保证顺序，这是重点。即使 p3 先解析，在等待 p2 和 p1 之后会在等待之后检索该值。

从技术上讲，每个作为 promise 的值都被 awaited 和 for await(... of ...) 绑定，因此，awaiting 绑定的值实际上并没有什么作用（除了可能将进一步的代码推入下一个堆栈）。

例如你有console.log(await await p1);