React中Axios.post用async/await后后续代码不执行问题求助

核心问题分析 #

数据能存入数据库说明后端的数据库操作已完成，但await之后的代码不执行，大概率是后端未返回响应导致Axios的Promise一直处于pending状态，或者前端未捕获请求错误导致代码中断。

具体修复步骤 #

1. 确保后端必须返回响应 #

后端处理完数据库写入后，无论成功还是失败，都要通过响应对象返回结果，不能让请求挂起。比如Express后端：

// 后端示例代码
app.post('/api/save-player', async (req, res) => {
  try {
    // 数据库写入操作
    await Player.create(req.body);
    // 必须发送成功响应
    res.status(201).json({ success: true, message: '数据保存成功' });
  } catch (error) {
    // 错误场景也要返回响应
    res.status(500).json({ success: false, error: error.message });
  }
});

如果后端不发送响应，Axios会一直等待，await永远不会结束，后续代码自然无法执行。

2. 前端添加错误捕获逻辑 #

用try/catch包裹await调用，避免请求过程中出现错误（比如网络波动、后端返回5xx状态码）导致代码直接中断：

// GameOverForm组件中的提交函数
const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post('/api/save-player', playerData);
    // 这里的代码现在会执行
    console.log('提交成功', response.data);
    setPostSuccess(true);
  } catch (error) {
    // 捕获并打印错误，方便排查
    console.error('提交失败:', error.response?.data || error.message);
    // 可选：添加错误状态提示
    setPostError(true);
  }
};

3. 验证Axios请求配置 #

确认请求的URL、请求体格式与后端要求一致：

• 若后端需要特定请求头（比如Content-Type: application/json），Axios默认会自动设置，但如果有特殊需求可以手动添加：

  await axios.post('/api/save-player', playerData, {
    headers: { 'Content-Type': 'application/json' }
  });
  

• 检查playerData的结构是否与后端接收的字段匹配，避免因格式问题导致后端处理异常。

验证方法 #

修复后，打开浏览器控制台的Network面板，查看请求的响应状态：

• 若返回200/201状态码，说明响应正常，await之后的代码会执行；
• 若返回错误状态码，catch块会捕获到错误，方便定位问题。

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