实现 axios 响应拦截错误回调
引言
在开发过程中，经常会涉及到与后端进行数据交互的场景，而 axios 是一款非常流行的 JavaScript 库，可以用于发起 HTTP 请求。在实际项目中，我们经常需要对请求的响应进行拦截，以便处理错误情况。在本文中，我将向你介绍如何使用 axios 实现响应拦截错误回调。
整体流程
在使用 axios 进行请求时，我们可以通过配置 interceptors 来实现请求和响应的拦截。具体来说，我们可以在请求拦截器中预处理请求，而在响应拦截器中处理错误情况。下面是整个流程的步骤表格：
| 步骤 | 操作 |
|---|---|
| 第一步 | 创建一个 axios 实例 |
| 第二步 | 添加请求拦截器 |
| 第三步 | 添加响应拦截器 |
| 第四步 | 发起请求 |
| 第五步 | 处理响应结果 |
下面将逐步进行详细讲解每个步骤需要做的事情，并给出相应的代码示例。
第一步：创建 axios 实例
首先，我们需要在项目中安装 axios。可以使用 npm 或者 yarn 进行安装。
npm install axios
接下来，我们需要引入 axios 并创建一个实例，以便后续使用。
import axios from 'axios';
const instance = axios.create({
baseURL: ' // 设置请求的基础URL
timeout: 5000, // 设置请求超时时间
});
在上面的代码中，我们通过 axios.create 方法创建了一个 axios 实例，可以设置一些默认的请求配置，如基础URL和超时时间。
第二步：添加请求拦截器
在第一步创建完 axios 实例后，我们可以为该实例添加请求拦截器。请求拦截器会在请求发送之前进行拦截，我们可以在这里对请求进行一些预处理操作，如添加请求头信息等。
instance.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
在上述代码中，我们使用 interceptors.request.use 方法来添加请求拦截器。该方法接收两个参数，第一个参数是一个回调函数，用于处理请求成功的情况；第二个参数是一个回调函数，用于处理请求错误的情况。
第三步：添加响应拦截器
接下来，我们需要添加响应拦截器。响应拦截器会在接收到响应后进行拦截，我们可以在这里处理响应的数据，如对返回的错误进行统一处理。
instance.interceptors.response.use(
response => {
// 对响应数据做些什么
return response;
},
error => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
与请求拦截器类似，在上述代码中，我们使用 interceptors.response.use 方法来添加响应拦截器。该方法也接收两个参数，第一个参数是一个回调函数，用于处理响应成功的情况；第二个参数是一个回调函数，用于处理响应错误的情况。
第四步：发起请求
在添加完请求和响应拦截器后，我们就可以使用 axios 实例来发送请求了。
instance.get('/api/data')
.then(response => {
// 处理响应结果
})
.catch(error => {
// 处理错误情况
});
上述代码中的 get 方法用于发起一个 GET 请求，并返回一个 Promise 对象，我们可以通过 then 方法来处理请求成功的情况，通过 catch 方法来处理请求错误的情况。
第五步：处理响应结果
在请求成功的情况下，我们可以在 then 方法中处理响应结果。
instance.get('/api/data
