如何配置Axios超时时间解决批量请求socket hung up问题？

你遇到的这个问题其实很常见——浏览器和服务器对并发连接数都有默认限制，比如Chrome这类浏览器同一域名下默认最多同时开6个TCP连接，一下子发500个请求肯定会触发连接排队和超时，哪怕服务器还在处理，前端这边的连接可能已经因为等待太久断开了。下面给你两个可行的解决方案：

一、配置Axios自定义超时时间 #

首先可以先尝试调整超时时间，给服务器足够的处理时间，避免前端过早判定连接断开。

1. 全局配置超时 #

如果所有请求都需要统一超时设置，可以在创建Axios实例的时候配置：

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '你的接口地址',
  timeout: 30000, // 30秒超时，可根据实际业务调整
});

2. 单个请求级别的超时 #

如果只有这批批量请求需要特殊超时，也可以在单个请求里单独设置：

const requests = [];
for (let i = 0; i < 500; i++) {
  requests.push(
    axiosInstance.get('/your-api-endpoint', {
      timeout: 60000, // 该请求单独用60秒超时
      params: { id: i }
    })
  );
}

不过要注意：调整超时只是缓解手段，本质上并发数过高的问题没解决，还是可能出现连接排队的情况。

二、拆分请求队列（更推荐的方案） #

解决这个问题的根本办法是控制并发数，把500个请求分成若干小批次，一批一批执行，避免同时发起大量请求。

示例代码：分批执行请求 #

这里写一个通用的分批处理函数，你可以直接复用：

async function batchRequests(requests, batchSize = 20) {
  const results = [];
  // 把请求数组切割成多个小批次
  for (let i = 0; i < requests.length; i += batchSize) {
    const batch = requests.slice(i, i + batchSize);
    // 等待当前批次所有请求完成
    const batchResults = await Promise.allSettled(batch);
    results.push(...batchResults);
    // 可选：批次之间加个小延迟，进一步减轻服务器压力
    await new Promise(resolve => setTimeout(resolve, 500));
  }
  return results;
}

// 使用方式
const requests = [];
// 先创建你的500个请求Promise
for (let i = 0; i < 500; i++) {
  requests.push(axiosInstance.get('/your-api-endpoint', { params: { id: i } }));
}

// 每20个请求一批执行
batchRequests(requests, 20).then(results => {
  // 按需处理结果：过滤成功/失败的请求
  const successfulResponses = results.filter(r => r.status === 'fulfilled').map(r => r.value);
  const failedRequests = results.filter(r => r.status === 'rejected').map(r => r.reason);
  console.log('成功请求数:', successfulResponses.length);
  console.log('失败请求数:', failedRequests.length);
});

为什么这个方案更好？ #

• 避免触发浏览器的并发连接限制，从根源减少socket连接超时的概率
• 减轻服务器的瞬时压力，服务器不需要一次性处理几百个请求
• 可以灵活控制请求节奏，甚至通过批次间的延迟进一步降低出错率

总结 #

如果只是偶尔出现超时，调整Axios的超时时间可以快速解决；但如果是固定的大量请求场景，拆分请求队列才是更稳定、更合理的方案，能从根源上避免并发数过高带来的各种问题。

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