Vue2 + Axios 拦截器详解
在现代 web 开发中，使用 Vue.js 结合 Axios 发起 HTTP 请求已经成为一种流行的做法。Axios 是一个基于Promise的 HTTP 库，用于在浏览器和 Node.js 中发送请求。而拦截器则使得我们可以在请求和响应被处理之前对它们进行自定义操作。
什么是拦截器？
拦截器允许我们在请求发出之前和响应到达前，添加自定义逻辑，例如请求头的设置、响应数据的处理，以及统一的错误处理。这对于提高代码的可维护性和增强功能很有帮助。
如何使用 Axios 拦截器？
我们可以在 Axios 实例中设置请求和响应的拦截器。以下是一些基本的示例代码：
import axios from 'axios';
// 创建 Axios 实例
const apiClient = axios.create({
baseURL: '
timeout: 10000,
});
// 请求拦截器
apiClient.interceptors.request.use(
config => {
// 在请求头中添加 token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
// 请求错误时做点什么
return Promise.reject(error);
}
);
// 响应拦截器
apiClient.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data;
},
error => {
// 处理响应错误
if (error.response) {
console.error('Error response:', error.response);
} else {
console.error('Error message:', error.message);
}
return Promise.reject(error);
}
);
以上代码解析：
-
创建 Axios 实例：我们先创建一个 Axios 实例并设置基本配置，包括
baseURL和请求超时时间。 -
请求拦截器：在请求发出前，我们将 token 添加到请求头中，这样后端可以验证用户身份。
-
响应拦截器：服务器响应后，我们可以直接返回
response.data，也可以根据需要进一步处理。
实际应用场景
在实际开发中，拦截器的使用场景十分广泛。例如：
- 身份验证：在每一个请求中添加 token。
- 统一错误处理：当服务器返回错误状态码时, 我们可以在响应拦截器中进行统一处理，例如跳转到登录页面。
- 全局 Loading：在发送请求时显示 loading 动画，在请求完成后隐藏。
旅行流程图示例
我们可以使用 Mermaid 绘制一个简单的旅行流程图来表示用户在使用 API 的过程。以下是一个示例：
journey
title 用户请求 API 流程
section 用户进行请求
用户访问页面: 5: 用户
页面发起 API 请求: 5: 页面
section 服务器处理请求
处理请求并返回数据: 5: 服务器
返回响应给用户: 5: 服务器
section 显示数据
前端处理响应数据: 5: 页面
显示数据给用户: 5: 页面
总结
通过使用 Axios 的拦截器，我们可以更加灵活地管理请求和响应，避免代码重复，提高系统的可维护性。在 Vue.js 项目中，适当使用拦截器，不仅能够提升开发效率，还能增强用户体验。希望这篇文章能帮助你更好地理解并运用 Axios 拦截器。
