JavaScript中forEach循环结合异步函数的执行问题

你遇到的核心问题是：forEach 不支持等待内部的异步操作完成。你写的async (key) => {}回调会被当成独立的Promise执行，但forEach会直接跳过这些Promise继续执行后面的代码，导致element = parsed以及后续的判断逻辑在异步操作还没完成时就跑了，自然拿不到正确的parsed值。

这里给你两种可行的解决办法：

方法一：使用for...of循环替代forEach #

for...of是支持await的，可以让解释器等待每个异步操作完成后再进入下一次循环，完全符合你"暂停后续逻辑直到循环完成"的需求。修改后的代码如下：

// 遍历Object.keys(parsed)，用for...of替代forEach
for (const key of Object.keys(parsed)) {
  let { cleanInput, errors } = await validateFullUserInput(
    parsed[key],
    branch,
    language
  );
  parsed[key] = cleanInput;
  if (errors.length > 0) {
    arr.push.apply(arr, errors);
  }
  console.log(parsed);
}

// 现在这部分代码会在所有异步操作完成后才执行
element = parsed;

if (arr.length > 0) {
  rejected.push(element);
} else {
  if (
    Object.keys(element.student).length > 0 ||
    Object.keys(element.firstGuardian).length > 0
  ) {
    success.push(element);
  }
}

方法二：使用Promise.all批量等待所有异步操作 #

如果你的异步操作之间没有依赖关系（不需要等前一个完成再执行下一个），用Promise.all可以让所有异步操作并行执行，效率更高。修改后的代码如下：

// 收集所有异步操作的Promise
const promises = Object.keys(parsed).map(async (key) => {
  let { cleanInput, errors } = await validateFullUserInput(
    parsed[key],
    branch,
    language
  );
  parsed[key] = cleanInput;
  if (errors.length > 0) {
    arr.push.apply(arr, errors);
  }
  console.log(parsed);
});

// 等待所有Promise完成
await Promise.all(promises);

// 后续逻辑现在会在所有异步操作完成后执行
element = parsed;

if (arr.length > 0) {
  rejected.push(element);
} else {
  if (
    Object.keys(element.student).length > 0 ||
    Object.keys(element.firstGuardian).length > 0
  ) {
    success.push(element);
  }
}

注意：这两种方法都需要把整个代码包裹在async函数里，因为要使用await关键字。

内容的提问来源于stack exchange，提问作者ahmed basher