React中Axios客户端多次调用后请求Pending问题求助

可能的原因及对应解决方案 #

1. 浏览器连接池耗尽

浏览器对同一域名的并发连接数有默认限制（比如Chrome最多6个），如果之前的请求未正常释放（比如异常未处理、请求未取消），后续请求会排队等待。

解决：

• 简化API调用函数，避免多余的Promise嵌套（你的apiPostData没必要再包一层Promise，Axios本身返回Promise）：

function apiPostData(url, postData) {
  return axiosClient.post(url, postData);
}

• 给Axios实例添加超时配置，防止请求无限Pending：

const axiosClient = axios.create({
  baseURL: apiUrl,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    Authorization: "",
  },
  timeout: 10000, // 设置10秒超时，按需调整
});

2. 未取消无用/重复请求

组件卸载后未取消请求，或者重复触发的请求堆积，占用连接资源。

解决：
使用AbortController在组件卸载时取消请求：

// 修改apiPostData支持传递signal
function apiPostData(url, postData, signal) {
  return axiosClient.post(url, postData, { signal });
}

// 修改getDataList
export function getDataList(code, filter, signal) {
  return apiPostData(
    "/xxx/yyy/dataList",
    {"code": code,"filter":filter},
    signal
  );
}

// 视图中调用
useEffect(() => {
  const controller = new AbortController();
  getDataList(code, filter, controller.signal)
    .then((response) => {
      console.log(response);
    })
    .catch((e) => {
      // 排除取消请求的错误
      if (e.name !== 'CanceledError') {
        errorHandler();
      }
    });

  // 组件卸载时取消请求
  return () => controller.abort();
}, []);

3. 服务端限流/队列

如果服务端有请求频率限制，超过阈值后会将请求放入队列等待，导致响应延迟。

解决：

• 查看响应头中的限流相关字段（比如X-RateLimit-Limit、X-RateLimit-Remaining），确认是否触发限流；
• 调整前端请求频率，比如添加防抖、节流，或者和后端协商调整限流规则。

4. 依赖项错误导致重复请求

如果code或filter在组件挂载后发生变化，但useEffect的依赖数组为空，可能导致请求逻辑异常；或者依赖项未正确设置，引发重复请求堆积。

解决：
将code和filter添加到useEffect的依赖数组中，同时确保每次依赖变化时取消之前的请求：

useEffect(() => {
  const controller = new AbortController();
  getDataList(code, filter, controller.signal)
    .then((response) => {
      console.log(response);
    })
    .catch((e) => {
      if (e.name !== 'CanceledError') {
        errorHandler();
      }
    });

  return () => controller.abort();
}, [code, filter]); // 添加依赖项

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