前言
在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.js
import 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.js
import 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的管理。
