带有嵌套映射承诺的意外 Promise.all答案

【问题标题】：Unexpected Promise.all with nested map promises带有嵌套映射承诺的意外 Promise.all
【发布时间】：2018-12-01 05:31:20
【问题描述】：

我需要使用array.map() 在 3 秒后显示数组的几条消息。这是数组：

const messages = [
    'hello', 'world', 'have', 'some', 'code'
]

为了在地图中等待，我创建了一个 wait 函数。

const wait = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(true)
    }, 3000)
})

然后，我有一个app 方法，我已经像这样执行了Promise.all()，

const app = async () => {
    await Promise.all(messages.map(async msg => {
        await wait
        document.querySelector('#app').innerHTML += msg + ', '
    }))
}

app()

预期的输出是在消息数组上的每次迭代中等待 3 秒，但它会在 3 秒后立即输出所有消息！

Codepen：https://codepen.io/rakibtg/pen/xQMwYK

我在这里缺少什么？

【问题讨论】：

一旦 3 秒过去了 wait 已解决...等待它会立即完成。您可能希望函数每次都返回一个新的承诺。
听起来您希望有一个序列行为？ Promise.all() 适用于在一组异步工作完成后做某事，但听起来不适合这里。
@stealththeninja 是的，我希望有一个序列行为
@Gerrit0 wait 现在应该每次都返回一个函数，但工作方式相同。 codepen.io/rakibtg/pen/xQMwYK
这是否与以下内容重复：stackoverflow.com/questions/43082934/…

标签： javascript ecmascript-6 es6-promise

【解决方案1】：

Promise.all() 可用于传递一个 Promise 列表，所有这些都被并行等待。

您共享的代码每次迭代都会等待 3 秒，但所有这些迭代都是同时发生的。

如果您不想并行执行所有操作，而是一次只处理一个，您可以将其重写为一个简单的循环：

const app = async () => {
  for (const msg of messages) {
    await wait();
    document.querySelector('#app').innerHTML += msg + ', '
  }
}

【讨论】：