Vue3使用axios拦截器教程
概述
本教程将指导你如何在Vue3项目中使用axios拦截器。拦截器是axios的一个强大功能，它可以在请求发送之前和响应返回之后对请求进行处理和拦截。通过使用拦截器，我们可以在请求中添加请求头、对请求参数进行处理、处理错误等。
整体流程
下面是使用axios拦截器的整体流程：
| 步骤 | 描述 |
|---|---|
| 1 | 安装axios和vue-axios库 |
| 2 | 创建一个axios实例 |
| 3 | 创建请求拦截器，并在其中添加请求头、处理请求参数等 |
| 4 | 创建响应拦截器，并在其中处理响应数据、处理错误等 |
| 5 | 将拦截器应用到axios实例中，并导出该实例 |
| 6 | 在Vue组件中引入axios实例 |
| 7 | 在需要发送请求的地方使用axios实例发送请求 |
接下来，我们将逐步进行这些步骤的代码实现。
步骤详解
步骤1：安装axios和vue-axios库
首先，我们需要安装axios和vue-axios库。在终端中运行以下命令：
npm install axios vue-axios
步骤2：创建一个axios实例
在项目的某个地方，我们需要创建一个axios实例。通常，我们可以将其放在一个单独的文件中，例如axiosInstance.js。创建该文件，并添加以下代码：
import axios from 'axios';
const instance = axios.create({
baseURL: ' // 设置请求的baseURL
timeout: 5000, // 设置请求超时时间
});
export default instance;
在上面的代码中，我们使用axios的create方法创建了一个实例。我们可以在create方法中传递一些配置选项，例如baseURL和timeout。
步骤3：创建请求拦截器
接下来，我们需要创建一个请求拦截器，用于在请求发送之前对请求进行处理。在axiosInstance.js文件中添加以下代码：
import axios from 'axios';
const instance = axios.create({
baseURL: '
timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// 添加请求头
config.headers.Authorization = 'Bearer token';
// 处理请求参数
// config.params = {
// ...config.params,
// key: 'value',
// };
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
export default instance;
在上面的代码中，我们使用interceptors.request.use方法来添加请求拦截器。在请求拦截器中，我们可以对请求的配置进行修改，例如添加请求头、处理请求参数等。
步骤4：创建响应拦截器
接下来，我们需要创建一个响应拦截器，用于在响应返回之后对响应进行处理。在axiosInstance.js文件中添加以下代码：
import axios from 'axios';
const instance = axios.create({
baseURL: '
timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
config.headers.Authorization = 'Bearer token';
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
(response) => {
// 对响应数据做些什么
// 处理响应数据
// response.data = {
// ...response.data,
// key: 'value',
// };
return response;
},
(error) => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
export default instance;
在上面的代码中，我们使用`interceptors.response
