Nuxt.js中的Axios没有正确地捕捉到错误。

Question

如上所述，我在Nuxt.js上的Axios没有正确地捕捉到错误。

我需要知道这个错误，这样我就可以提示让用户知道他们的输入是不正确的，但它只是 控制台日志 错误代码状态不是来自我的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)

但我期望从 控制台.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 财产。

在这里，你可以读到关于 https:/github.comaxiosaxiosissues960。