前言
在Vue 3项目中使用Vite进行开发时，对axios进行请求封装以及统一管理接口API是非常常见的做法。这不仅可以提高代码的复用性和可维护性，还能统一处理请求和响应，管理错误处理逻辑等。下面是一个详细的步骤和示例代码，来说明如何在Vue 3项目中使用Vite对axios进行请求封装及接口API的统一管理。
1. 项目初始化和安装依赖
首先，确保你已经创建了一个Vue 3项目并安装了Vite。可以使用以下命令进行项目初始化：
npm init vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install接下来，安装axios：
npm install axios2. 创建axios实例
在项目中创建一个src/utils/request.js文件，用于创建axios实例，并进行基本的配置。
// src/utils/request.jsimport axios from 'axios';// 创建axios实例
const service = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL || 'https://api.example.com', // 设置请求的基地址timeout: 5000, // 请求超时时间
});// 请求拦截器
service.interceptors.request.use(config => {// 在发送请求之前做些什么// 例如：添加token到header中const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use(response => {// 对响应数据做些什么return response.data;},error => {// 对响应错误做些什么if (error.response) {switch (error.response.status) {case 401:// 处理未授权的错误console.error('未授权，请重新登录');break;case 404:// 处理资源不存在的错误console.error('请求的资源不存在');break;default:console.error('请求失败，请稍后再试');}} else if (error.request) {console.error('请求失败，请检查网络连接');} else {console.error('请求配置错误');}return Promise.reject(error);}
);export default service;3. 统一管理API接口
在src/api目录下创建文件来管理API接口。例如，可以创建一个src/api/user.js文件来管理与用户相关的接口。
src/api/user.jsimport request from '@/utils/request';// 获取用户信息
export function getUserInfo(userId) {return request({url: `/users/${userId}`,method: 'get',});
}// 更新用户信息
export function updateUserInfo(userId, data) {return request({url: `/users/${userId}`,method: 'put',data,});
}// 删除用户
export function deleteUser(userId) {return request({url: `/users/${userId}`,method: 'delete',});
}4. 在组件中使用API
在Vue组件中引入并使用这些API。例如，在src/components/UserProfile.vue组件中使用用户信息API。
<template><div><h2>用户信息</h2><div v-if="userInfo"><p>用户名: {{ userInfo.username }}</p><p>邮箱: {{ userInfo.email }}</p></div><div v-else><p>加载中...</p></div><button @click="fetchUserInfo">获取用户信息</button><button @click="updateUserInfo">更新用户信息</button><button @click="deleteUser">删除用户</button></div>
</template><script setup>
import { ref } from 'vue';
import { getUserInfo, updateUserInfo, deleteUser } from '@/api/user';const userId = '123'; // 假设用户ID为123
const userInfo = ref(null);const fetchUserInfo = async () => {try {const info = await getUserInfo(userId);userInfo.value = info;} catch (error) {console.error('获取用户信息失败', error);}
};const updateUserInfo = async () => {try {const updatedInfo = {username: 'newUsername',email: 'newEmail@example.com',};await updateUserInfo(userId, updatedInfo);fetchUserInfo(); // 重新获取更新后的用户信息} catch (error) {console.error('更新用户信息失败', error);}
};const deleteUser = async () => {try {await deleteUser(userId);userInfo.value = null; // 清空用户信息console.log('用户删除成功');} catch (error) {console.error('删除用户失败', error);}
};
</script><style scoped>
/* 样式代码 */
</style>5. 总结
通过以上步骤，我们成功地在Vue 3项目中使用Vite对axios进行了请求封装，并统一管理了接口API。这种做法不仅提高了代码的可维护性和复用性，还能统一处理请求和响应，管理错误处理逻辑，使得项目结构更加清晰和易于扩展。希望这些代码和步骤能够帮助你在实际项目中更好地进行axios请求的封装和接口API的管理。
