论vue项目api相关代码的组织方式
看了下项目组同事的代码，发现不同项目有不同的组织版本
版本一：
├─apis│ a.api.js│ b.api.js│ b.api.js│ d.api.js
每个api文件里都是这样的代码
// d.api.jsimport axios from '@/utils/http'export function editUser (Param) { return axios.post('url1', { ...Param })}export function deleteUser (Param) { return axios.post('url2', { ...Param })}// 调用方式如下import {editUser} from '@/apis/d.api.js' 这种方法的缺点：
- 新增一个借口就新增一个方法
- 任何需要调用借口的地方都需要引入
- api文件里只有url和函数名不一样,其他都一样,应该封装到一起
- 查看所有接口需一个一个函数去看,麻烦
版本二：
干脆不把api统一到一起，把axios挂载到vue对象上只在需要的地方写this.$axios.post(url,params).then()
这种方法缺点：
- 如果修改url路径,需要全局搜索替换改动地方较多
- 无法查看所有接口，不便于全局掌控
版本三:
// apis/index.js// 把所有api的url统一在一起并挂在到vue对象上// 所有接口都在一个文件里会比较大// 可以按功能模块分组编写let ENV = { name1: 'url1', // 用户相关接口 name2: 'url2', // 积分相关接口 name3: 'url3', // 产品相关接口 name4: 'url4', }export default ENV // src/main.jsimport api from '@/apis/index.js'Vue.prototype.$api = api
//需要调用接口的js文件this.$axios.post(this.$api.name1,params).then()
缺点：
- 暂时没想到
优点:
- 更改url时只需要改动一个地方
- 可以在一个地方查看所有接口