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

在使用 Axios 进行 HTTP 请求时，如果请求失败，Axios 会生成一个错误对象。我们可以通过捕获这个错误对象来获取 HTTP 状态码。当请求出错时，Axios 错误对象（通常是 error）会包含一个 response 属性，它是一个包含了 HTTP 响应信息的对象。response 对象进一步包含了 status 属性，它就是 HTTP 状态码。

以下是捕获 Axios 错误并从中获取状态码的基本方法：

javascript
axios.get('/some-endpoint')
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败，处理错误
    if (error.response) {
      // 服务器至少返回了错误代码和消息
      console.log("Error Status Code:", error.response.status);
      console.log("Error Response Data:", error.response.data);
      console.log("Error Response Headers:", error.response.headers);
    } else if (error.request) {
      // 请求已经发出，但是没有收到响应
      console.log("No response received:", error.request);
    } else {
      // 发生了一些在设置请求时触发的错误
      console.log("Error Message:", error.message);
    }
    // 其他错误处理
  });

在这段代码中，我们首先尝试对某个端点发起 GET 请求。如果请求成功，我们可以在 .then() 部分处理响应。如果请求失败，Axios 会调用 .catch() 部分的代码。在 .catch() 中，我们首先检查 error.response 是否存在。如果存在，我们就可以从中读取状态码，这通常意味着服务器处理了请求但返回了一个错误状态码。如果 error.response 不存在，我们还可以检查 error.request 来决定下一步的操作。如果 error.request 也不存在，那么问题可能是在设置请求时发生的，比如一个无效的 URL。

例如，如果后端服务返回了一个 404 状态码，表示找不到请求的资源，我们就可以在 error.response.status 中看到这个状态码。如果返回了 500 状态码，表示服务器内部错误，我们同样可以通过 error.response.status 获取到这个信息，并据此采取适当的错误处理措施。

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

如果从服务器收到响应，该error对象将包含以下response属性：

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

使用 TypeScript，可以轻松找到所需的正确类型。

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

shell
import { AxiosResponse, AxiosError } from 'axios'

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

此外，您可以将参数传递给这两种类型，以告诉您在内部期望什么，response.data如下所示：

shell
import { AxiosResponse, AxiosError } from 'axios'
axios.get('foo.example')
  .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)
  })

console.log正如 @Nick 所说，当你使用JavaScript对象时，你看到的结果Error取决于 的具体实现console.log，这会有所不同，并且（我认为）使得检查错误变得非常烦人。

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

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

请求配置中有一个名为的新选项validateStatus。您可以使用它来指定在 status < 100 或 status > 300 时不抛出异常（默认行为）。例子：

shell
const {status} = axios.get('foo.example', {validateStatus: () => true})

您可以使用展开运算符 ( ...) 将其强制转换为新对象，如下所示：

shell
axios.get('foo.example')
    .then((response) => {})
    .catch((error) => {
        console.log({...error})
})

请注意：这不会是错误的实例。