如何在React中使用axios批量发送请求并等待全部执行完成

Axios 发起的所有请求默认返回标准 Promise 实例，你可以直接使用 JavaScript 内置的批量 Promise 处理方法实现需求，以下是具体实现方案：

基础实现（所有请求都成功才执行后续逻辑） #

使用Promise.all，它接收一个Promise数组作为参数，只有数组内所有Promise都resolve之后，才会返回结果数组，顺序和传入的请求顺序完全对应：

import { useEffect } from 'react';
import axios from 'axios';

const YourPage = () => {
  useEffect(() => {
    // 把三个请求包装成Promise数组
    const requestQueue = [
      axios.get('/posts'),
      axios.get('/users'),
      axios.get('/friends')
    ];

    // 写法1：async/await 写法（更易读）
    const fetchAllData = async () => {
      try {
        // 结果顺序和请求传入顺序一一对应
        const [postsRes, usersRes, friendsRes] = await Promise.all(requestQueue);
        // 后续逻辑，比如赋值给state
        console.log('帖子数据:', postsRes.data);
        console.log('用户数据:', usersRes.data);
        console.log('好友数据:', friendsRes.data);
        // 你要执行的后续操作写在这里
      } catch (err) {
        // 任意一个请求失败都会进入这里的错误捕获
        console.error('某一个请求出错了:', err);
      }
    };

    fetchAllData();

    // 写法2：.then链式调用写法
    // Promise.all(requestQueue)
    //   .then(([postsRes, usersRes, friendsRes]) => {
    //     // 后续操作
    //   })
    //   .catch(err => {
    //     // 错误处理
    //   })
  }, []);

  // 其余页面逻辑...
}

特殊场景：允许部分请求失败，依然等所有请求结束再执行后续逻辑 #

如果你不需要所有请求都成功，哪怕某个接口报错，也要等三个请求都结束再执行后续操作，可以用Promise.allSettled替换Promise.all，它会返回每个请求的执行状态（成功/失败）和对应结果：

const fetchAllData = async () => {
  const results = await Promise.allSettled(requestQueue);
  // 遍历结果，分别处理成功和失败的请求
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`请求${index+1}成功，数据:`, result.value.data);
    } else {
      console.log(`请求${index+1}失败，错误:`, result.reason);
    }
  })
  // 所有请求都处理完之后的后续逻辑写在这里
};

注意事项 #

• 两种批量处理方法都不会阻塞请求并发，三个请求是同时发起的，不会按顺序逐个发送
• 如果你需要按顺序发起请求（前一个请求结束再发下一个），单独写串行逻辑即可

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