什么是Axios
Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送异步网络请求。它简化了发送 GET、POST、PUT、DELETE 等请求的过程，并且支持请求拦截、响应拦截、取消请求和自动处理 JSON 数据等功能。
为什么要封装Axios
封装 Axios 可以统一管理项目中的网络请求，简化代码并提高维护性和可扩展性。通过请求和响应拦截器，我们可以处理鉴权、错误处理等复杂逻辑，同时还能方便地应对不同的网络请求需求。具体来说，封装 Axios 可以带来以下好处：
- 统一处理请求和响应：集中处理错误、鉴权、日志记录和通用配置。
- 简化代码：避免在每个模块中重复配置请求头、超时等参数。
- 提升可维护性：在一个地方集中管理全局配置，便于后续修改和维护。
- 处理多样需求：实现请求节流、取消重复请求等功能，满足不同场景的需求。
通过这些优化，封装 Axios 能够显著提升项目的整体质量和开发效率。
如何封装Axios
在Vue大型项目中使用Axios，可以按照以下步骤进行：
1. 全局封装Axios
首先，创建一个单独的文件 request.js 来封装 Axios 的全局配置：
import axios from 'axios';
// 创建 Axios 实例
const axiosInstance = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL, // 配置基础URL
timeout: 5000, // 设置超时时间
headers: { 'Content-Type': 'application/json' }
});
// 请求拦截器
axiosInstance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`; // 统一添加Authorization头
}
return config;
},
error => Promise.reject(error)
);
// 响应拦截器
axiosInstance.interceptors.response.use(
response => response.data,
error => {
if (error.response.status === 401) {
// 处理未授权
}
return Promise.reject(error);
}
);
export default axiosInstance;
2. Vue项目中全局引入Axios
在 main.js 中全局引入 Axios 封装：
import axiosInstance from './utils/request';
Vue.prototype.$http = axiosInstance;
这样你可以在任意 Vue 组件中使用 this.$http 发起网络请求。
3. 模块化管理API
对于大型项目，将API请求模块化管理，可以在 api 文件夹中按功能模块划分文件：
例如在 api/user.js：
import axios from '../utils/request';
export function getUserInfo(params) {
return axios.get('/user/info', params);
}
export function updateUser(data) {
return axios.post('/user/update', data);
}
4. 在组件中使用Axios
在组件中直接调用封装好的API方法：
import { getUserInfo } from '@/api/user';
export default {
data() {
return {
userInfo: null
};
},
created() {
const parmas = {
name: 'admin',
password: '123456'
}
this.fetchUserInfo(parmas );
},
methods: {
async fetchUserInfo(params) {
try {
this.userInfo = await getUserInfo(params);
} catch (error) {
console.error('获取用户信息失败', error);
}
}
}
};
