Nuxt.js 中的 Axios 无法正确捕获错误

Question

正如我上面提到的，我在 Nuxt.js 上的 Axios 没有正确捕获错误

我需要知道错误，所以我可以提示让用户知道他们的输入不正确，但它只有 console.log 错误代码状态而不是来自我的 API 的消息

这是我的代码

await axios
  .post(
    "API LINK",
    {
      email: user.email,
      password: "123456",
      name: user.name,
      dob: user.dob ?? null,
      gender: user.gender ?? null,
      profileImage: imageUrl ?? user.profileImage,
      userType: user.userType
    }
  )
  .then(res => {
    console.log("success");
    console.log(res);
  })
  .catch(err => {
    console.log('fail');
    console.log(err)
  })

这是登录 chrome 控制台的内容

error
add.vue?104b:181 Error: Request failed with status code 400
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:61)

但是我对 console.log(err) 的期望是

(This is response from postman)
{
    "message": "Error creating new user.",
    "error": {
        "code": "auth/invalid-password",
        "message": "The password must be a string with at least 6 characters."
    }
}

我不知道发生了什么。

Answer 1

尝试这个

 console.log(err.response)

为了使代码更清晰，您可以解构参数:

  .catch(({ response }) => {
    console.log('fail');
    console.log(response)
  })

如果您想使用其他属性名称而不是 response你可以这样做:

  .catch(({ response: err }) => {
    console.log('fail');
    console.log(err)
  })

问题是当console.log试图输出错误时，打印的是字符串表示，而不是对象结构，所以你看不到 .response属性(property)。

在这里你可以阅读关于 https://github.com/axios/axios/issues/960