如何用Fetch API发送多请求并等待全部完成后执行后续代码

要实现异步发送大量Fetch请求，同时等待所有请求处理完成后再执行后续代码，可以借助Promise.all()，同时封装重复的请求逻辑来简化代码：

1. 封装重复的请求逻辑 #

把重复的Fetch调用和结果处理封装成函数，避免冗余代码：

const sendRequest = (url, requestData) => {
  return fetch(url, { method: 'post', body: requestData })
    .then(response => response.json())
    .then(data => {
      if (data.STATUS === 'SUCCESSFUL') {
        // 这里编写请求成功后的处理逻辑
        // 比如更新状态、存储数据等
      }
      return data; // 返回数据，方便后续统一处理
    })
    .catch(error => {
      // 捕获请求过程中的异常
      console.error('请求出错:', error);
      throw error; // 抛出错误，让Promise.all能感知到失败
    });
};

2. 批量发起请求并等待全部完成 #

将所有请求的Promise实例存入数组，通过Promise.all()等待所有请求完成：

// 准备所有请求的Promise（示例中假设你有多组请求数据）
const requests = [
  sendRequest(url, someData1),
  sendRequest(url, someData2),
  sendRequest(url, someData3)
  // 可根据需求添加更多请求
];

// 等待所有请求处理完成后执行后续代码
Promise.all(requests)
  .then(allResults => {
    // 所有请求都成功完成后，执行这里的逻辑
    console.log('所有请求处理完毕:', allResults);
    // 在这里编写你需要延迟执行的代码
  })
  .catch(error => {
    // 只要有一个请求失败，就会进入这个回调
    console.error('存在请求失败:', error);
  });

额外说明 #

• Promise.all()会并行发起所有请求，相比串行请求效率更高
• 如果希望即使部分请求失败，也等待所有请求完成，可以用Promise.allSettled()替代Promise.all()，它会返回每个请求的结果（成功或失败）
• 封装后的函数便于统一修改请求逻辑，比如添加请求头、统一错误处理等

内容的提问来源于stack exchange，提问作者Abdul Raheem Dumrai