Axios捕获异常未返回JSON格式错误信息问题求助

问题场景 #

前端注册页面的handleSignup函数通过Axios发起POST请求，服务端返回400状态码并携带自定义错误信息，但前端catch块仅能捕获到[AxiosError: Request failed with status code 400]，无法拿到服务端返回的Email already exists.内容。

前端请求代码：

const handleSignup = async () => {
  try {
    setIsLoading(true)
    const res = await axios({
      url: 'http://10.0.2.2:8080/signup',
      method: 'POST',
      data: { name, email, password },
    })
    Alert.alert(res.data.message)
  } catch (err) {
    console.error(err);
  } finally {
    setIsLoading(false)
  }
}

服务端返回代码：

return res.status(400).json({ data: { message: 'Email already exists.' } })

解决方法 #

Axios的错误对象中，服务端返回的响应数据存储在err.response.data字段里，结合你的服务端返回结构，需要逐层读取嵌套的data和message：

修改后的catch块代码：

catch (err) {
  // 先判断是否存在服务端响应
  if (err.response) {
    // 按照服务端返回的结构提取错误信息
    const errorMsg = err.response.data.data.message;
    console.error(errorMsg); // 输出: Email already exists.
    Alert.alert(errorMsg); // 弹窗展示错误信息
  } else {
    // 处理无响应的情况（如网络故障）
    console.error(err.message);
  }
}

注意事项 #

• 必须先判断err.response是否存在，避免网络错误时因访问undefined属性导致报错。
• 要严格匹配服务端返回的JSON结构，你的服务端把错误信息放在了data.data.message下，所以不能直接用err.response.data.message。

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