Async/await结合Promise.all与嵌套forEach未等待执行完成的解决方法

问题根源 #

原代码里用forEach遍历异步操作，但forEach不会返回任何值，导致Promise.all无法捕获内部的异步任务，尤其是第二层循环的操作根本没被等待，最终函数提前返回空的vehicleListData。

修改后的代码（两种实现方式） #

方式一：基于原结构修改，保留push操作

async function fnGetVehicleList(makeCode, responseModels) {
  let vehicleListData = [];
  // 用map替代forEach，生成Promise数组交给Promise.all等待
  await Promise.all(responseModels.Table.map(async (model) => {
    const vehicleDetailResponse = await getVehicleDetails('2024', makeCode, model.Code);
    // 直接批量push所有车辆详情，无需额外异步等待
    vehicleListData.push(...vehicleDetailResponse.Table);
  }));
  return vehicleListData;
}

方式二：更简洁的数组合并写法

async function fnGetVehicleList(makeCode, responseModels) {
  // 收集每个model对应的车辆详情数组
  const vehicleSubArrays = await Promise.all(responseModels.Table.map(async (model) => {
    const vehicleDetailResponse = await getVehicleDetails('2024', makeCode, model.Code);
    return vehicleDetailResponse.Table;
  }));
  // 将二维数组合并为一维数组返回
  return vehicleSubArrays.flat();
}

关键修改点说明 #

1. 替换forEach为map：map会把每个迭代中异步函数返回的Promise收集成数组，Promise.all能正确等待所有Promise执行完成，确保所有API调用和后续操作都完成后才继续执行。
2. 移除冗余的第二层异步等待：原代码中第二层的await Promise.all(forEach(...))完全无效，因为forEach返回undefined，Promise.all会直接解析成功，不会等待任何操作。如果第二层没有异步操作，直接批量添加元素即可。

内容的提问来源于stack exchange，提问作者Aryan M