How can i get the status code from an http error in axios

在使用 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})
})

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