如何在 javascript 中同步异步映射函数

Question

我有一个异步映射函数，但希望它同步执行，因为我需要在同一个循环中使用第一条语句的输出。但是即使使用 await 语句，地图也会异步运行，请您帮助理解为什么会发生这种情况。

我的用例是如果不存在则将记录插入 mongodb 并在循环中存在时更新它。 数据存在于数据库中，但在循环内查找失败，但在外部工作。

我的代码：

        const doSomethingAsync = () => {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(Date.now());
                }, 1000);
            });
        };

        await Promise.all(
            modelVarients.map(async varient => {
                console.log(`varient: ${varient._id}`);
                console.log('1');
                const onlineDevice = await Device.findOne({
                    model: varient._id,
                });
                console.log('2');
                await doSomethingAsync();
                console.log('3');
                await doSomethingAsync();
                console.log(JSON.stringify(onlineDevice));
                await doSomethingAsync();
                console.log('4');
                return varient;
            })
        );

我得到的日志：

varient: 8 pro
1
varient: note
1
varient: iphone x
1
2
2
2
3
3
3
null
null
null
4
4
4

但我期望得到的：

varient: 8 pro
1
2
3
<actual response from db for 8 pro>
4
varient: note
1
2
3
<actual response from db for note>
4
varient: iphone x
1
2
3
<actual response from db for iphone x>
4

Answer 1

看起来你应该链接你的承诺，而不是与Promise.all并行运行

Answer 2

modelVarients.map(async () => >...) 将所有元素转换为 Promise，这意味着它们都开始执行。然后Promise.all() 收集它们并等待所有这些，这就是为什么你可以使用这个结构来等待map 完成。这是并行处理。

您需要的是顺序处理，您可以使用reduce 来完成，如下所示：

await modelVarients.reduce(async (memo, varient) => {
    await memo;
    // all the other things
}, Promise.resolve())

reduce 在某种意义上类似于map，它为数组中的所有元素创建一个 Promise，但是有一个 当前值 从一个元素传递到另一个元素.在这种情况下，第一个是Promise.resolve()，第二个是第一个的结果，依此类推。使用await memo，您可以等待上一个结果。

使用reduce，最后一个元素将等待前一个元素，它等待前一个元素，以此类推，因此不需要Promise.all。

我写过关于 map 和 reduce 如何使用异步函数的文章，它们将帮助您了解全局。