翻自： 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()));