小编点评

**1、`forEach` 循环无法使用 `async` 和 `await`：** `forEach` 循环不包含异步代码，因此无法使用 `async` 和 `await`关键字。 **2、`async` 关键字用于定义异步函数：** `async` 关键字用于定义一个异步函数，它返回一个 `Promise`。 **3、`await` 语句用于等待异步操作完成：** `await` 语句用于等待异步操作完成，并将结果存储在一个变量中。 **4、`async` 关键字在 `forEach` 中的使用：** 在 `forEach` 循环中使用 `async` 关键字可以将异步函数包装成一个异步函数，并使用 `await` 语句等待其完成。 **5、`await` 语句用于等待 Promise 处理完毕：** `await` 语句可以用于等待多个 Promise 处理完毕，并将结果存储在一个数组中。 **示例：** 使用 `async` 和 `await` 关键字的示例： ```javascript const users = await getUsers(); users.forEach(async (user) => { const details = await user.getDetails(); console.log(details); }); ``` **其他方法：** * 使用 `for` 循环：`for (let i = 0; i < users.length; i++) {...}` * 使用 `for ... of` 的简化版：`for (const user of users) {...}` * 使用 `Promise.all` 等方法等待多个 Promise 处理完毕。

正文

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