如何用Axios快速批量提交365条数据至数据库？

问题根源 #

你当前的代码效率低主要有两个原因：

• 循环里逐个发起请求，频繁的HTTP握手会产生大量额外开销；而且用Promise.all包裹单个请求完全是多余操作，没发挥并行请求的优势。
• 每完成一个请求就调用this.getData()，重复触发数据拉取，进一步拖慢整体流程。

优化方案 #

1. 控制并发的批量请求 #

一次性发起365个请求容易触发浏览器或服务器的并发限制，导致请求排队失败。可以将数据分成小批次，每批次并行处理固定数量的请求，比如每10个一组：

// 定义每批次并发数
const batchSize = 10;
const batches = [];

// 分割数据为多个批次
for (let i = 0; i < this.data.length; i += batchSize) {
  batches.push(this.data.slice(i, i + batchSize));
}

// 按批次处理请求
const processAllBatches = async () => {
  for (const batch of batches) {
    // 并行处理当前批次的所有请求
    await Promise.all(batch.map(item => axios.post("URL", item)));
  }
  // 所有请求完成后，仅调用一次数据拉取
  this.getData();
};

processAllBatches();

2. 后端支持批量提交（最优解） #

如果能修改后端，建议提供批量提交接口，把整个数组或分批后的数组一次性发送，大幅减少HTTP请求次数：

// 直接提交完整数组（后端需支持接收批量数据）
axios.post("/api/batch-submit", this.data)
  .then(() => this.getData());

// 若单次提交数据量过大，可分批次提交
const batchSize = 50;
const batches = [];
for (let i = 0; i < this.data.length; i += batchSize) {
  batches.push(this.data.slice(i, i + batchSize));
}

// 并行处理所有批次
Promise.all(batches.map(batch => axios.post("/api/batch-submit", batch)))
  .then(() => this.getData());

3. 移除重复的拉取操作 #

原代码中每个请求完成都调用this.getData()，会造成365次重复拉取，完全没必要。必须等所有请求都处理完毕后，再统一调用一次数据拉取。

额外优化点 #

• 如果不需要跨域携带Cookie，关闭请求的withCredentials选项，减少请求开销。
• 确保后端开启Gzip压缩，减小传输数据的体积。
• 给请求添加超时设置，避免单个请求挂起阻塞整个流程：

axios.post("URL", item, { timeout: 10000 }) // 10秒超时

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