React无法捕获Node.js后端错误，请求技术协助

我用React做前端、Node.js做后端搭了个注册页面，但检测重复用户名时，前端Axios抓不到错误，试了好几种catch写法都没用，求帮忙排查。

前端代码 #

const handleSubmit = async (event) => {
    event.preventDefault();
    
    if (handleValidation()) {
      await axios.post(registerRoute, {
        username,
        email,
        password,
      }).then((response) => {
        console.log(response);
      }).catch((error) => {
         if (error.response.status === 11000) {
          console.log(error.response.data);
         }
      })
      navigate("/");
    }
  };

后端代码 #

module.exports.register = async (req, res, next) => {
   const { username, email, password } = req.body;

   if (!username || typeof username !== 'string') {
      return res.json({status: 'error', message: 'Invalid username'})
   }

    const usernameExit = await Users.findOne({username: username})
    if (usernameExit) {
       return res.status(11000).json({ message: "Username already exit" });
    }

   if (!password || typeof password !== 'string') {
      return res.json({status: 'error', message: 'Invalid password'})
   }

  try {
    const hashedPassword = await bcrypt.hash(password, 2); 
    const user = new Users({
      username,
      email,
      password: hashedPassword,
    });
    user.save();
    delete user.password;
    return res.json({ status: true, user });
  } catch (error) {
   if (error.code === 11000) {
      return res.status(11000).json({ message: "Username already exit" });
   }
  }
};

问题排查及解决 #

1. HTTP状态码使用错误 #

你后端返回的status:11000是MongoDB的重复键错误码，但HTTP标准状态码里没有这个值——Axios只会把4xx/5xx这类状态码的请求判定为失败并进入catch块。用11000的话，Axios会认为是成功请求，直接走then逻辑，不会触发catch。

解决：把重复用户名的状态码改成409 Conflict（语义上最符合重复资源的标准状态码）：

// 后端两处返回重复用户名的地方都修改
return res.status(409).json({ message: "用户名已存在" });

2. 前端catch逻辑不完整且状态码不匹配 #

当前你只判断了error.response.status === 11000，改完状态码后要对应改成409，同时还要覆盖其他错误场景（比如网络断连、无响应等），避免漏抓：

.catch((error) => {
  if (error.response) {
    // 服务器返回了响应
    if (error.response.status === 409) {
      console.log(error.response.data.message);
      // 这里可以加用户提示逻辑，比如弹出错误弹窗
    } else {
      console.log('其他请求错误:', error.response.data);
    }
  } else if (error.request) {
    // 请求发出去但没收到响应（网络问题）
    console.log('网络异常，请检查连接');
  } else {
    // 请求配置阶段出错
    console.log('请求配置错误:', error.message);
  }
})

3. 前端跳转逻辑不受请求结果控制 #

你在await axios.post()之后直接调用navigate("/")，不管请求成功还是失败都会跳转页面。必须把跳转逻辑放到then块里，只有注册成功才执行：

await axios.post(registerRoute, {
  username,
  email,
  password,
}).then((response) => {
  console.log(response);
  navigate("/"); // 仅成功时跳转
}).catch((error) => {
  // 错误处理逻辑
})

4. 后端user.save()未加await #

user.save()是异步操作，不加await的话，可能还没完成数据库写入就提前返回响应，而且如果保存时出现重复键错误（比如数据库没加唯一索引、前端绕过检查），try块的catch也捕获不到。改成：

await user.save();

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