如何优化大批量数据上传数据库的接口速度与请求管理

问题背景 #

• 当前开发React Web应用实现数据库大批量数据上传功能
• 测试阶段使用3000行、76KB大小的测试文件，全量上传耗时约4分钟，远达不到性能要求
• 实际上线后需要支持10万行、5MB规模的文件上传
• 请求量达到8万左右时会出现网络资源耗尽的问题
• 单条数据包含6-20个字段，目前已通过对象封装传值的方式减少了部分请求次数
• 已确认后端接口存在资源泄漏问题，需要同时优化前端请求逻辑，替代当前基于setTimeout、嵌套try/catch的简陋实现

现有实现代码 #

1. 单条上传接口请求逻辑 #

const stepData = async() =>{
    const body = {a,b,c,d,e,f}
    assignToBody(body)
    try{
        const response = await fetch('http://localhost:5000/stepdata',{
                method:"POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(body)
        })
    }catch(err){
        console.log(err.message)
    }
}

2. 当前节流队列逻辑 #

注：assignVals函数作用是为接口请求的body对象赋值

const delayQue = () =>{
    assignVals(row)
    row++
    
    if(row % 500 == 0){
        setTimeout(delayQue,2000)
    }else{
        setTimeout(delayQue,100)
    }
}

核心优化方案 #

1. 从根源减少请求总数（提速效果最明显） #

不要发10万次单条上传请求，直接改为批量上传模式：

• 前端按固定批次拆分数据，比如每批次携带100-500条数据一次性提交，后端配套实现批量入库逻辑，总请求数可以直接降到200-1000次，耗时能压缩到原来的1/10甚至更低
• 5MB的总数据量完全支持分批上传，不需要拆成单条请求。单条请求的TCP握手、TLS协商、HTTP头开销占比极高，这也是3000条数据要传4分钟的核心原因

2. 替换delayQue逻辑，解决网络资源耗尽问题 #

当前的delayQue根本不会等待上一个请求完成就直接调度下一个请求，哪怕设置了setTimeout，只要请求响应时间超过设置的100ms/2000ms间隔，待处理的请求就会在浏览器里排队积压，最终耗尽浏览器的同域名并发连接池资源。
替换为可控并发的请求队列实现，固定最大并发数（建议设为3-6，匹配浏览器同域名默认并发限制），上一个批次的请求处理完成后再补位发起下一批，从根本上避免请求积压：

// 可控并发队列实现示例
const BATCH_SIZE = 200; // 每批上传条数，根据后端承载能力调整
const MAX_CONCURRENT = 4; // 最大并发请求数
const uploadAllData = async (allRows) => {
  // 先把所有数据拆成批次
  const batches = [];
  for (let i = 0; i < allRows.length; i += BATCH_SIZE) {
    batches.push(allRows.slice(i, i + BATCH_SIZE));
  }

  let currentBatchIndex = 0;
  let activeRequestCount = 0;
  const results = [];

  return new Promise((resolve) => {
    const runNextBatch = async () => {
      if (currentBatchIndex >= batches.length && activeRequestCount === 0) {
        resolve(results);
        return;
      }
      // 并发数没到上限就持续发起请求
      while (activeRequestCount < MAX_CONCURRENT && currentBatchIndex < batches.length) {
        const currentBatch = batches[currentBatchIndex];
        currentBatchIndex++;
        activeRequestCount++;

        try {
          const res = await fetch('http://localhost:5000/batchStepData', {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({list: currentBatch})
          });
          results.push(await res.json());
        } catch (err) {
          console.error('批次上传失败:', err);
          // 这里可补充失败重试逻辑
        } finally {
          activeRequestCount--;
          runNextBatch();
        }
      }
    };
    // 启动初始并发请求
    runNextBatch();
  });
};

3. 其他配套优化点 #

• 给上传请求加失败重试机制，单批次失败最多重试2-3次，避免单条请求失败导致全量上传中断
• 上传过程中增加进度提示，提升用户体验
• 配合后端修复资源泄漏问题：检查后端接口是否存在未释放的数据库连接、是否未及时返回响应导致连接挂起，批量入库时不要循环单条insert，使用数据库批量插入语法减少IO开销
• 本地调试时不要打开多余的同源标签页，避免抢占并发连接资源

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