React中Axios发送POST请求仅部分执行无报错该如何解决？

• 服务端核心问题：接口处理完数据库操作后，始终没有给客户端返回任何响应，导致前端发出的axios请求一直处于pending状态，超时后会被自动终止，同时你写的外层try/catch无法捕获异步回调内部的错误，异常信息收集不全。
• 客户端核心问题：所有写法都没有正确等待全部请求执行完成，函数提前结束后未完成的请求会被浏览器销毁；同时浏览器对同域名并发请求数存在限制（一般为6~8个），一次性发出45个请求会导致大量请求排队超时。

第一步：修复服务端接口 #

无论数据库操作成功失败，都必须返回响应给前端，同时移除无效的外层try/catch：

app.post('/api/insert', (req, res) => {
  const { id, name, city } = req.body;
  const sql = `INSERT INTO canteens (id, name, city) VALUES (?,?,?)`;
  db.query(sql, [id, name, city], (err, result) => {
    if (err) {
      console.log('插入失败:', err);
      return res.status(500).json({ success: false, msg: '插入失败', error: err.message });
    }
    console.log("插入成功");
    return res.status(200).json({ success: true, data: result });
  });
});

第二步：修复客户端请求逻辑 #

方案1：并行请求+全量等待（适合请求量小的场景） #

用Promise.all等待所有请求执行完成，单个请求失败也不会阻断其他请求，方便排查错误：

const insertCanteens = async () => {
  const requestList = canteens.map(canteen => {
    return Axios.post(`${databaseLocation}/api/insert`, {
      id: canteen.id,
      name: canteen.name,
      city: canteen.city
    }).catch(err => {
      console.error(`id为${canteen.id}的数据插入失败:`, err);
      return { success: false, id: canteen.id };
    });
  });
  // 等待所有请求执行完毕
  const results = await Promise.all(requestList);
  const successCount = results.filter(item => item?.data?.success || item.success).length;
  console.log(`全部请求处理完成，共成功插入${successCount}条数据`);
};

方案2：串行请求（适合请求量大、避免并发限制的场景） #

逐个发送请求，上一个完成再发下一个，速度稍慢但稳定性最高：

const insertCanteens = async () => {
  let successCount = 0;
  for (const canteen of canteens) {
    try {
      await Axios.post(`${databaseLocation}/api/insert`, {
        id: canteen.id,
        name: canteen.name,
        city: canteen.city
      });
      successCount++;
      console.log(`id为${canteen.id}的数据插入成功，当前成功数：${successCount}`);
    } catch (err) {
      console.error(`id为${canteen.id}的数据插入失败:`, err);
    }
  }
  console.log(`全部处理完成，共成功插入${successCount}条数据`);
};

最优优化方案：单次请求批量插入 #

45条数据完全不需要拆成45次请求，直接一次性传给后端做批量插入，性能提升10倍以上，彻底避免并发问题：

客户端代码 #

const insertCanteens = async () => {
  try {
    // 把所有数据整理为二维数组传给后端
    const insertData = canteens.map(item => [item.id, item.name, item.city]);
    await Axios.post(`${databaseLocation}/api/batchInsert`, { insertData });
    console.log('批量插入成功');
  } catch (err) {
    console.error('批量插入失败:', err);
  }
};

服务端新增批量插入接口 #

app.post('/api/batchInsert', (req, res) => {
  const { insertData } = req.body;
  const sql = `INSERT INTO canteens (id, name, city) VALUES ?`;
  db.query(sql, [insertData], (err, result) => {
    if (err) {
      console.log('批量插入失败:', err);
      return res.status(500).json({ success: false, error: err.message });
    }
    return res.json({ success: true, affectedRows: result.affectedRows });
  });
});

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