Vue 与 Axios 整合：实现 HTTP 请求的封装与拦截
在 Vue 项目中，Axios 是一个强大的 HTTP 客户端库，用于处理 API 请求。通过整合 Axios，我们可以实现请求的封装和拦截，提高代码的可维护性和可扩展性。以下我将逐步解释核心知识点和实现步骤，帮助你掌握这一技巧。
Axios 的核心优势
Axios 提供了一系列优势，使其成为 Vue 项目的首选 HTTP 库：
- 支持 Promise API ：允许使用
async/await或.then()处理异步请求，简化代码。 - 拦截请求/响应：可以通过拦截器在请求前或响应后添加自定义逻辑，如添加请求头或处理错误。
- 自动转换 JSON 数据：自动将请求和响应的数据转换为 JSON 格式，减少手动处理。
- 支持请求取消 ：使用
CancelToken可以取消正在进行的请求，提升用户体验。
Axios 的安装与引入
在 Vue 项目中，首先需要通过 npm 安装 Axios：
bash
npm install axios然后，在项目中创建专属的 axios 实例，避免全局配置冲突。例如，在 src/utils 目录下创建一个文件来管理实例。
请求封装核心
创建 axios 实例是封装的核心步骤。这允许我们配置基础设置：
- 基础路径 (baseURL) ：设置 API 的根路径，如
https://api.example.com。 - 请求超时时间 (timeout)：定义请求超时的毫秒数，例如 5000ms。 这样，所有请求都会继承这些配置，减少冗余代码。
请求拦截器
请求拦截器用于在请求发送前添加逻辑。常见场景包括：
- 添加请求头 ：例如，携带认证 token（如
Authorization: Bearer token）。 - 统一处理加载状态 ：在请求开始时显示加载动画。 拦截器通过
axios.interceptors.request.use()方法实现。
响应拦截器
响应拦截器用于在响应返回后添加逻辑。关键功能包括：
- 统一处理响应数据 ：剥离无效的返回层（如 API 的
data字段），直接返回核心数据。 - 统一捕获错误 ：处理常见错误，如 401（未授权）或 500（服务器错误），并显示友好提示。 使用
axios.interceptors.response.use()方法设置拦截器。
接口函数封装
按业务模块封装 API 函数，简化组件调用。例如：
- 创建
api/userApi.js文件，封装用户相关的请求（如登录、获取信息）。 - 使用
get、post等方法，暴露简洁的接口函数。 这样，在 Vue 组件中只需调用这些函数，而不需直接处理 Axios 细节。
案例代码步骤
以下是一个完整的实现案例，分为三个步骤：
步骤 1：在 utils 目录创建 request.js，封装 axios 实例与拦截器
javascript
// src/utils/request.js
import axios from 'axios';
// 创建 axios 实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 基础路径
timeout: 5000, // 超时时间
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 添加请求头，例如携带 token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 可以在这里显示加载状态
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 统一处理响应数据，剥离无效层
return response.data;
},
error => {
// 统一捕获错误，如 401 或 500
if (error.response.status === 401) {
// 处理未授权错误
alert('请重新登录！');
} else if (error.response.status === 500) {
// 处理服务器错误
alert('服务器错误，请稍后重试！');
}
return Promise.reject(error);
}
);
export default instance;步骤 2：在 api 目录创建 userApi.js，封装用户接口函数
javascript
// src/api/userApi.js
import request from '@/utils/request';
// 封装用户登录接口
export const login = (data) => {
return request.post('/user/login', data);
};
// 封装获取用户信息接口
export const getUserInfo = () => {
return request.get('/user/info');
};步骤 3：在组件中调用接口函数，获取数据并处理逻辑 在 Vue 组件中，导入并调用封装好的接口函数：
javascript
// src/components/UserComponent.vue
<script>
import { login, getUserInfo } from '@/api/userApi';
export default {
methods: {
async handleLogin() {
try {
const response = await login({ username: 'user', password: 'pass' });
console.log('登录成功', response);
// 处理登录逻辑，如跳转页面
} catch (error) {
console.error('登录失败', error);
}
},
async fetchUserInfo() {
const userInfo = await getUserInfo();
this.user = userInfo; // 渲染数据
}
}
};
</script>总结要点
掌握 Vue 与 Axios 的整合技巧，能显著提升开发效率：
- 减少冗余代码：通过封装 axios 实例和拦截器，避免在每个请求中重复配置。
- 便于统一维护：拦截器处理 token 携带、错误捕获等常见需求，确保一致性。
- 快速响应需求：熟记拦截器的使用场景，如添加认证头或处理 API 错误，能加速开发。
通过以上步骤，你可以轻松实现 HTTP 请求的封装与拦截，构建更健壮的 Vue 应用。如果有具体问题，欢迎进一步讨论！