在Vue项目中，对API进行统一管理有助于维护和扩展。以下是一个简单的实现方法：
-
在项目的
src目录下，创建一个新的api文件夹，用于存放所有的API请求文件。 -
在
api文件夹下，创建一个名为index.js的文件，用于统一导出所有的API请求。
// src/api/index.js
import * as userApi from './modules/user';
import * as productApi from './modules/product';
export { userApi, productApi };
-
在
api文件夹下，创建一个名为modules的文件夹，用于存放不同模块的API请求。 -
在
modules文件夹下，为每个模块创建一个单独的文件，例如：user.js和product.js。在每个文件中，编写该模块的API请求。
// src/api/modules/user.js
import axios from 'axios';
export function getUserList(params) {
return axios.get('/api/user/list', { params });
}
export function deleteUser(id) {
return axios.delete(`/api/user/${id}`);
}
// ... 其他用户相关的API请求
// src/api/modules/product.js
import axios from 'axios';
export function getProductList(params) {
return axios.get('/api/product/list', { params });
}
export function deleteProduct(id) {
return axios.delete(`/api/product/${id}`);
}
// ... 其他产品相关的API请求
- 在组件中使用API请求：
// src/components/UserList.vue
import { userApi } from '@/api';
export default {
data() {
return {
userList: [],
};
},
methods: {
async fetchUserList() {
try {
const { data } = await userApi.getUserList();
this.userList = data;
} catch (error) {
console.error('获取用户列表失败', error);
}
},
async deleteUser(id) {
try {
await userApi.deleteUser(id);
this.fetchUserList();
} catch (error) {
console.error('删除用户失败', error);
}
},
},
created() {
this.fetchUserList();
},
};
通过以上方法，我们可以实现API的统一管理，便于维护和扩展。
