如何从Axios中的HTTP错误中获取状态代码？

Question

这可能看起来很愚蠢，但是我试图在Axios中请求失败时获取错误数据。

axios
  .get('foo.com')
  .then((response) => {})
  .catch((error) => {
    console.log(error); //Logs a string: Error: Request failed with status code 404
  });

是否可以获取一个可能包含状态代码和内容的对象，而不是字符串？例如：

Object = {status: 404, reason: 'Not found', body: '404 Not found'}

Answer 1

正如@Nick所说，当你使用控制台时，你会看到结果。日志JavaScript错误对象取决于控制台的确切实现。日志，它的变化和（imo）使检查错误变得异常烦人。

如果您想绕过toString（）方法查看完整的Error对象及其携带的所有信息，您可以使用JSON. stringify：

axios.get('/foo')
  .catch(function (error) {
    console.log(JSON.stringify(error))
  });

Answer 2

使用TypeScript，很容易找到您想要的正确类型。

这使一切变得更容易，因为您可以通过自动完成获得类型的所有属性，因此您可以知道响应和错误的正确结构。

import { AxiosResponse, AxiosError } from 'axios'

axios.get('foo.com')
  .then((response: AxiosResponse) => {
    // Handle response
  })
  .catch((reason: AxiosError) => {
    if (reason.response!.status === 400) {
      // Handle 400
    } else {
      // Handle else
    }
    console.log(reason.message)
  })

此外，您还可以向这两种类型传递一个参数，以告知响应中的预期内容。数据如是：

import { AxiosResponse, AxiosError } from 'axios'
axios.get('foo.com')
  .then((response: AxiosResponse<{user:{name:string}}>) => {
    // Handle response
  })
  .catch((reason: AxiosError<{additionalInfo:string}>) => {
    if (reason.response!.status === 400) {
      // Handle 400
    } else {
      // Handle else
    }
    console.log(reason.message)
  })

Answer 3

您看到的是error对象的toString方法返回的字符串。（错误不是字符串。）

如果已从服务器收到响应，则错误对象将包含响应属性：

axios.get('/foo')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });