Axios响应拦截器错误信息拿不到状态码
在使用Axios进行网络请求时，我们通常会使用响应拦截器来处理返回的数据。然而，有时候我们会遇到一个问题，就是无法获取到错误信息中的状态码。这个问题在实际开发中比较常见，下面我将详细介绍这个问题以及解决方案。
问题描述
在使用Axios发送网络请求时，我们可以通过添加响应拦截器来对返回的数据进行处理，例如处理错误信息、统一处理返回数据等。然而，有时候我们会发现，在错误处理函数中无法获取到错误信息中的状态码。
例如，我们发送一个请求到后端接口，返回的是一个错误信息，错误信息中应该包含状态码和错误描述。但是，当我们在响应拦截器中处理错误时，只能获取到错误描述，而无法获取到状态码。这就给我们的错误处理带来了一定的困扰。
问题分析
为了更好地理解这个问题，我们首先来看一下Axios的响应拦截器的用法。
Axios的响应拦截器可以通过调用interceptors.response.use方法来添加。这个方法接收两个参数，第一个参数是请求成功时的回调函数，第二个参数是请求失败时的回调函数。
在请求失败时，我们通常会在回调函数中处理错误信息。然而，问题就出现在这里，无法获取到错误信息中的状态码。
为了解决这个问题，我们需要对Axios的响应拦截器进行一些扩展。
解决方案
要解决这个问题，我们可以通过在响应拦截器中自定义错误对象，并将状态码保存在错误对象中。然后，在错误处理函数中可以通过判断错误对象中是否存在状态码来获取状态码。
下面是一个示例代码：
import axios from 'axios';
axios.interceptors.response.use(
response => {
// 处理返回的数据
return response;
},
error => {
// 自定义错误对象
const customError = new Error();
// 判断是否存在状态码
if (error.response && error.response.status) {
// 将状态码保存在错误对象中
customError.status = error.response.status;
}
// 处理错误信息
// ...
return Promise.reject(customError);
}
);
在上面的示例中，我们通过创建一个自定义错误对象customError，将状态码保存在customError.status属性中。然后，在错误处理函数中，我们可以通过判断customError.status是否存在来获取状态码。
流程图
为了更好地理解上述解决方案的执行流程，我们可以使用流程图来进行可视化展示。
flowchart TD
A[请求发送] --> B[响应拦截器]
B -->|请求成功| C[处理返回的数据]
B -->|请求失败| D[自定义错误对象]
D --> E[判断是否存在状态码]
E -->|存在| F[将状态码保存在错误对象中]
F --> G[处理错误信息]
G --> H[返回 Promise.reject(customError)]
上述流程图描述了整个请求发送到响应拦截器的流程。在响应拦截器中，如果请求失败，则会创建一个自定义错误对象，并将状态码保存在该错误对象中。然后，会进入错误处理逻辑，最终返回一个带有自定义错误对象的rejected状态的Promise。
关系图
为了更好地展示Axios响应拦截器错误信息拿不到状态码的问题，我们可以使用关系图来进行可视化展示。
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
上述关系图描述了客户、订单和交付地址之间的关系。一个客户可以有多个订单，一个订单可以包含多个行项目，一个交付地址被多个客户使用。
结论
通过以上的分析和解决方案，我们可以解决Axios响应拦截器错误信息
