React中如何将多轮Axios请求结果汇总后传入另一Axios请求？

原代码存在的问题 #

1. 数据类型错误：resData初始为undefined，且每次更新是合并成对象，但后续判断resData.length是数组的属性，对象无length，导致后续post请求永远不会触发。
2. 状态更新逻辑冗余：循环中的每个请求完成都会触发状态更新，进而触发useEffect多次执行，不仅浪费性能，还可能因请求完成顺序不确定导致数据覆盖。
3. 维护成本高：依赖状态监听串联逻辑，代码分散，后续排查问题或修改逻辑都很麻烦。

最优解决方案：使用Promise.all处理并发请求 #

直接通过Promise.all等待所有put请求完成，汇总结果后再发起post请求，逻辑集中且清晰，无需依赖状态更新和useEffect监听。

基础实现（确保所有请求成功才执行后续操作）

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

// 组件内部逻辑
useEffect(() => {
  // 生成5个put请求的Promise数组
  const putRequestPromises = Array.from({ length: 5 }, () => 
    axios.put('api', params, config).then(res => res.data.result)
  );

  // 等待所有请求完成，汇总结果
  Promise.all(putRequestPromises)
    .then(allResults => {
      // 用汇总后的结果发起后续post请求
      return axios.post('nextApi', { data: allResults }, config);
    })
    .then(postResponse => {
      // 处理后续请求的响应
      console.log('后续请求执行成功', postResponse);
    })
    .catch(error => {
      // 统一处理所有请求的错误（任意一个请求失败都会进入这里）
      console.error('请求出错', error);
    });
}, []); // 空依赖数组，组件挂载时仅执行一次

容错实现（允许部分请求失败，过滤成功结果后再执行后续操作）

如果需要兼容部分请求失败的场景，可以用Promise.allSettled：

useEffect(() => {
  const putRequestPromises = Array.from({ length: 5 }, () => 
    axios.put('api', params, config)
  );

  Promise.allSettled(putRequestPromises)
    .then(results => {
      // 过滤出所有成功的请求结果
      const successfulResults = results
        .filter(item => item.status === 'fulfilled')
        .map(item => item.value.data.result);

      // 可根据需求判断是否需要发起后续请求（比如必须5个都成功）
      if (successfulResults.length === 5) {
        return axios.post('nextApi', { data: successfulResults }, config);
      } else {
        console.warn(`仅成功获取${successfulResults.length}/5条数据，跳过后续请求`);
      }
    })
    .catch(error => {
      console.error('处理请求结果时出错', error);
    });
}, []);

方案优势 #

• 逻辑集中：所有请求流程串联在一个异步链中，代码可读性和维护性大幅提升。
• 性能更优：避免了多次状态更新和组件重新渲染。
• 错误处理统一：可以在一个catch中处理所有请求的异常，无需分散处理。

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