如何在forEach内使用异步调用 async/await

翻自： How to use async and await in a forEach JS loop?

https://learn.coderslang.com/0144-how-to-use-async-and-await-in-a-foreach-js-loop/

事实上我们无法在 forEach 循环内使用 async/await 起到异步作用，让我们看看如何解决修复它。

async/await 在forEach 中为啥不起作用？

当你在forEach 循环内调用异步函数，下一个循环并不会等到上个循环结果后再被调用

想象一下，你有一个 getUsers 方法返回用户列表 User , user只有用户列表，但不包含具体的detail信息，所以你使用forEach 试图去获取用户详情

const users = await getUsers();

users.forEach(user => {
  const details = user.getDetails();
  console.log(details);
})

打印结果却是 3 个pending状态的 promise

你很自然的想到getDetails是个异步函数，需要给它加上await 关键字

const users = await getUsers();

users.forEach(user => {
  const details = await user.getDetails();
  console.log(details);
})

运行后发现报了另一个语法错误

SyntaxError: await is only valid in async function

你意识到给如果 forEach 传递的函数有是异步 则需要用 async 标记为异步函数

再次修复它

const users = await getUsers();

users.forEach(async (user) => {
  const details = await user.getDetails();
  console.log(details);
})

很好，你盯着半天发现并没有按users数组的顺序输出结果

解决方案：

你需要使用for 代替 forEach 循环重写这部分代码

const users = await getUsers();

for (let i = 0; i < users.length; i++) {
  const details = await user.getDetails();
  console.log(details);
}

也可以使用 for .... of

const users = await getUsers();

for (const user of users) {
  const details = await user.getDetails();
  console.log(details);
}

如果你实在不喜欢简单的代码，那么可以用个小技巧 使用 Array 的 map 方法

const users = await getUsers();

const userDetailsPromises = users.map(user => user.getDetails());
const userDetails = await Promise.all(userDetailsPromises);

console.log(userDetails);

让我们一步步分析

1、第一行代码没有改变就是获取 users 数组

2、使用map循环调用 getDetails 返回新的 userDetailsPromises 数组，数组元素都为Promise类型

3、使用 await Promise.all 等待所有 Promise 处理完毕

4、最后打印出结果数组

代码也可以组合简化为

const userDetails = await Promise.all(users.map(user => user.getDetails()));