JavaScript forEach 异步操作的同步化处理详解

forEach 方法用于遍历 JavaScript 数组，其默认行为是同步执行。然而，当 forEach 循环体内部包含异步操作（例如 Promise）时，其执行顺序便不再同步。 文章中提到的代码片段试图通过 async/await 来同步 forEach 循环中的异步任务，但未能达到预期效果。这是因为 async 关键字仅将 forEach 循环体内的回调函数转换为异步函数，而 forEach 本身仍然是同步迭代的，无法等待异步操作完成。

因此，console.log(result) 会在每个异步操作完成后立即执行，导致 result 数组的填充顺序与预期不符，结果并非同步的。

解决方法：使用 Promise.all 和 map

问题的关键在于 forEach 无法内在地等待异步操作。要实现同步效果，需要使用 Promise.all 来等待所有异步操作完成后再进行后续处理。 正确的做法是利用 map 方法生成一个 Promise 数组，然后用 Promise.all 等待所有 Promise 解析。

改进后的代码如下：

const requestList = arr.map(async (item) => await fn(item));
const results = await Promise.all(requestList);

这段代码首先使用 map 方法将数组 arr 中的每个元素映射成一个 Promise，fn(item) 代表异步操作。然后，Promise.all(requestList) 会等待所有 Promise 都 resolve 后，返回一个包含所有结果的数组 results。 请注意，这段代码必须在 async 函数中执行，才能使用 await 关键字。 这确保了代码会等待所有异步操作完成后再继续执行后续代码，从而达到同步化的效果。