React中Axios Post请求偶发未完成，数据库字段不更新如何修复？

问题原因确认 #

你的猜测完全正确，问题出在then的回调写法上：你直接把history.push的执行结果传给了then，而不是把跳转逻辑封装成函数传入then，这就会导致请求刚发起、还没等后端响应就立刻执行了跳转，页面切换过程中未完成的异步请求会被浏览器主动取消，所以就出现了偶发的数据库更新不生效的问题。

修复方案 #

前端代码修复 #

把then里的跳转逻辑包装成回调函数，确保只有Axios请求拿到后端响应之后才执行跳转：

Axios.post(Addr_currentRound_addOne, { gameId: gameId })
  .then(() => {
    // 仅请求成功后再执行跳转
    history.push("/leiter_tunierplan/"+gameId);
  })
  .catch(err => {
    // 建议新增错误捕获逻辑，避免接口报错无感知
    console.error("更新轮次失败：", err);
  });

可选后端优化建议 #

可以给接口增加错误返回逻辑，方便前端感知请求失败的情况：

app.post("/currentRoundAddOne", (req, res) => {
  const gameId = req.body.gameId;
  db.query(
    "UPDATE tunierplan SET currentRound=currentRound+1 WHERE id=?;",
    [gameId],
    (err, result) => {
      if (err) {
        console.log(err);
        // 错误时返回500状态码
        res.status(500).send("更新失败");
      } else {
        res.send("Daten Übertragen");
      }
    }
  );
});

内容的提问来源于stack exchange，提问作者Pätsn