循环调用axios接口Promise.all耗时久，如何改为串行执行并存储响应

你可以通过async/await搭配for循环实现严格的串行请求逻辑，每次请求响应完成后再发起下一次，最终将所有结果存入数组后更新state：

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

const YourComponent = () => {
  const [data, setData] = useState([]);

  const fetchSerialData = async () => {
    const requestTimes = 10;
    const resultList = [];
    for (let i = 0; i < requestTimes; i++) {
      // 等待当前请求完成后再进入下一轮循环
      const response = await axios.get(`/user/${i}`);
      resultList.push(response.data);
    }
    // 所有请求完成后统一更新state，避免重复渲染
    setData(resultList);
  };

  // 组件挂载时触发请求，可根据实际需求调整触发时机
  useEffect(() => {
    fetchSerialData();
  }, []);

  // 其余组件逻辑
  return <div>{/* 渲染data的业务逻辑 */}</div>
};

补充说明 #

• 修正了原代码中URL拼接的语法错误，改用模板字符串完成路径参数拼接
• 如果需要每拿到一个请求结果就更新一次state，可以将setData移入循环内，写法如下：

for (let i = 0; i < requestTimes; i++) {
  const response = await axios.get(`/user/${i}`);
  setData(prev => [...prev, response.data]);
}

• 原代码中state更新逻辑存在问题，response.map(res => Setdata(res.data))会导致state被反复覆盖，最终仅保留最后一次请求的结果，新方案已修复该问题

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