如何在React前端展示Node.js后端API返回的自定义错误信息

场景说明 #

后端接口会根据不同校验逻辑返回对应的自定义错误（比如站点名已存在、公司名已存在），前端用Axios调用时需要在catch块里正确拿到这些错误信息并展示。

后端代码示例 #

if (Sname) {
    console.log("Site Name Exist");
    return next(new ErrorResponse("Site name exist", 401));
}
if (Cname) {
    console.log("Company Name Exist");
    return next(new ErrorResponse("Company name exist", 401));
}

前端原代码 #

try {
       const { datab } = await axios.post(
          "/api/auth/companyOrigin",
        {
            data,
         },
           config  );
      setStep(step + 1);
    }
  catch(error){
        console.log("Error " + error);//需要在这里展示具体错误
  }

解决方法 #

Axios的错误对象里，后端返回的自定义错误信息一般在error.response.data中（具体字段取决于后端ErrorResponse的结构），调整catch代码即可提取：

修改后的前端代码 #

try {
  const { datab } = await axios.post(
    "/api/auth/companyOrigin",
    { data },
    config
  );
  setStep(step + 1);
} catch (error) {
  // 提取后端返回的错误信息，兼容网络错误情况
  const errMsg = error.response?.data?.message || error.message || "请求出错";
  console.log("Error: " + errMsg);
  // 可以把errMsg赋值给状态变量，在页面上渲染展示
  // 比如：setErrorInfo(errMsg);
}

关键提示 #

• 确认后端的ErrorResponse返回时，错误信息存在响应体的message字段（如果后端用的是其他字段，比如msg，要对应修改）。
• 用?.可选链避免因网络错误导致error.response不存在而报错。
• Axios会把非2xx状态码的请求都抛进catch块，要注意区分业务错误和网络错误。

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