如何在forEach函数中正确使用async/await？

别担心，刚接触异步编程的时候踩这些坑太正常了！我们一步步理清楚问题出在哪，然后把代码修复好。

先说说你原代码的核心问题 #

1. forEach不会等待异步任务完成：你用forEach遍历URL列表并调用makeRequest，但forEach是同步执行的——它只会把每个回调函数快速丢出去，根本不管里面的异步请求有没有完成。所以你刚遍历完就return responseArray，这时候所有请求还在后台跑，数组自然是空的。
2. 语法与逻辑链错误：原代码里的.then关联逻辑不对，forEach本身不返回Promise，没法直接在它后面链式调用.then；而且变量声明后少了分号，导致语法上就有问题。

你尝试的async/await写法也有误区：把async加在forEach的回调里没用，因为forEach不会处理回调返回的Promise；另外await responseArray.push(response)完全没必要，push是同步操作，不需要等待。

正确的修复方案 #

假设makeRequest(url)是一个返回Promise的异步函数（从你调用.then来看应该是），我们可以用Promise.all来等待所有请求完成，这是处理多个并行异步请求的标准做法。

写法1：链式.then风格

}).then(function() {
  // 用map把每个URL转换成对应的请求Promise，收集成数组
  const requestPromises = [url1, url2, url3, url4].map(url => makeRequest(url));
  // Promise.all会等待所有Promise都成功完成，然后返回结果数组
  return Promise.all(requestPromises);
})
// 这里就能拿到所有响应组成的数组了
.then(function(responseArray) {
  console.log('所有请求完成:', responseArray);
  // 在这里处理你的结果
})
.catch(function(error) {
  // 处理任何一个请求失败的情况
  console.error('某个请求出错:', error);
});

写法2：async/await风格（更直观）

}).then(async function() {
  // 先收集所有请求的Promise
  const requestPromises = [url1, url2, url3, url4].map(url => makeRequest(url));
  // await会等待所有请求完成，直接拿到结果数组
  const responseArray = await Promise.all(requestPromises);
  return responseArray;
})
.then(function(responseArray) {
  console.log('所有请求完成:', responseArray);
})
.catch(function(error) {
  console.error('请求出错:', error);
});

为什么这样能行？ #

• map会遍历每个URL，把它转换成makeRequest(url)返回的Promise，生成一个纯Promise数组。
• Promise.all会监听这个数组里的所有Promise：只有当所有Promise都成功resolve时，它才会返回一个新的Promise，resolve的值就是所有响应按原URL顺序组成的数组；如果任何一个请求失败（Promise reject），Promise.all会立即触发reject，所以一定要加catch处理错误。

内容的提问来源于stack exchange，提问作者anoop chandran