验证Axios结合Async/Await的用法是否正确（避免请求堆积）

一、前端代码问题 #

你的前端postConclusion函数虽用到了async/await，但写法不规范，还存在错误处理缺失的问题：

1. 混合使用await与.then：await已能返回axios请求的响应结果，无需再链式调用.then，混合写法会增加代码混乱度。
2. 未处理请求失败场景：若axios请求失败（如网络错误、后端报错），会抛出未捕获异常，导致前端报错。

修正后的前端代码 #

// 前端React代码
// 添加请求锁避免重复提交
let isSubmitting = false;

const postConclusion = async () => {
  // 防重复提交：如果正在请求中，直接返回
  if (isSubmitting) return;
  isSubmitting = true;

  try {
    const res = await axios({
      method: "POST",
      data: {
        conclusion: conclusionInput,
      },
      withCredentials: true,
      url: "http://localhost:4000/conclusion",
    });
    console.log(res);
  } catch (err) {
    // 处理请求失败的情况
    console.error("提交失败：", err);
  } finally {
    // 请求完成（成功/失败）后解锁
    isSubmitting = false;
  }
};

二、后端代码问题 #

后端的async/await用法存在严重问题，会导致错误无法被捕获，甚至引发进程崩溃：

1. 异步回调中使用async：User.findOne的回调被标记为async，但Express无法捕获该回调内部抛出的异常（如throw err），一旦出错会导致Node.js进程崩溃。
2. 错误处理缺失：user.save()可能失败，但无任何错误捕获逻辑；同时未处理user不存在的情况，会导致前端请求超时（因未返回响应）。
3. 冗余的逗号运算符：(user.conclusion = req.body.conclusion), await user.save();里的逗号完全多余，属于写法错误。

修正后的后端代码 #

// 后端Node / Express代码
app.post("/conclusion", async (req, res) => {
  console.log("尝试提交结论");
  try {
    // 使用Mongoose的Promise版本方法，配合async/await
    const user = await User.findOne({ username: req.user.username });
    
    if (!user) {
      return res.status(404).send("用户不存在");
    }

    user.conclusion = req.body.conclusion;
    await user.save();
    
    res.send("结论保存成功");
  } catch (err) {
    console.error("保存失败：", err);
    // 返回服务器错误状态码
    res.status(500).send("服务器内部错误");
  }
});

三、请求堆积的解决 #

要避免连续批量提交导致的请求堆积，核心是前端限制重复请求：

• 上述前端代码中添加了isSubmitting状态锁，请求未完成时，重复调用postConclusion会直接返回，避免发送多个重复请求。
• 若需处理批量提交场景（如连续输入后自动提交），可使用防抖（debounce）：设置延迟时间，在用户停止操作后再发送请求，避免频繁触发。

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