axiosInstance error获取不到status

原创

mob649e8169b366 2023-07-30 13:50:52 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8169b366的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用Axios获取HTTP错误状态码时遇到的问题

Axios是一个流行的基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。它提供了一种简单、直观的方式来发送HTTP请求，并处理响应。

然而，有时候我们在使用Axios时会遇到一些问题。本文将介绍一个常见的问题，即无法获取到HTTP错误状态码的问题，并提供解决方案。

问题描述

在使用Axios发送HTTP请求时，如果服务器返回了一个错误状态码（如500），我们可能希望能够捕获这个错误状态码，并做出相应的处理。通常情况下，我们可以通过response.status来获取到错误状态码。但是，有时候我们会遇到一个奇怪的问题，无法正确获取到错误状态码。

问题示例

让我们看一个简单的示例代码，来模拟这个问题：

import axios from 'axios';

axios.get('
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    console.log(error.response.status);
  });

上面的代码中，我们发送了一个GET请求到`

然而，当服务器返回一个错误状态码时，我们可能会发现无法正确获取到状态码，控制台输出的结果可能是undefined。

问题分析

这个问题的原因是Axios在处理错误响应时的一个行为。当服务器返回一个错误状态码时，Axios不会将状态码作为一个错误抛出，而是将其视为一个正常的响应。这意味着我们无法在catch块中通过error.response.status来访问到错误状态码。

解决方案

为了解决这个问题，我们可以通过创建一个Axios实例来修改Axios的默认行为。我们可以在实例中自定义一个validateStatus函数，用于判断状态码是否为错误状态码。

import axios from 'axios';

const axiosInstance = axios.create({
  validateStatus: function (status) {
    return status < 500;
  }
});

axiosInstance.get('
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    console.log(error.response.status);
  });

在上面的代码中，我们使用axios.create方法创建了一个Axios实例，并通过validateStatus函数来自定义状态码的判断逻辑。在这个例子中，我们只将小于500的状态码视为成功，大于等于500的状态码视为错误。这样，我们就可以在catch块中正确地获取到错误状态码了。