论vue项目api相关代码的组织方式
2023-09-27 14:26:44 时间
论vue项目api相关代码的组织方式
看了下项目组同事的代码,发现不同项目有不同的组织版本
版本一:
├─apis
│ a.api.js
│ b.api.js
│ b.api.js
│ d.api.js
每个api文件里都是这样的代码
// d.api.js
import 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.js
import api from '@/apis/index.js'
Vue.prototype.$api = api
//需要调用接口的js文件
this.$axios.post(this.$api.name1,params).then()
缺点:
- 暂时没想到
优点:
- 更改url时只需要改动一个地方
- 可以在一个地方查看所有接口
相关文章
- vue - 选项
- 31 Vue组件中Slot插槽的使用1
- 【Vue】通过【总线bus】方式实现【兄弟组件】之间参数传递(图文+代码示例)
- vue.js+koa2项目实战(一)创建项目和elementUI配置
- Vue - 本地上传 Excel 文件页面表格预览(配合 Ant Design Vue / 带分页)
- [转]vue项目中 指令 v-html 中使用过滤器filters功能
- Vue项目--尚品汇(axios重写,代理服务器、API统一管理)
- 【前端大神面考面试官系列】入门Vue全家桶
- (27)打鸡儿教你Vue.js
- 基于Idea从零搭建一个最简单的vue项目
- antV G6流程图在Vue中的使用
- Vue知识点总结(24)——使用VueCli创建一个项目(超级详细)
- React和Vue等框架什么时候操作DOM
- vue全家桶面试
- vue实现商品上下架功能(状态值随之改变)
- Vue中如何实现将表格导出Excel
- Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制
- nginx下载 并将vue项目部署上去
- vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求
- vue前台 (三)优化三级分类请求次数(发送ajax次数)
- vue项目兼容IE浏览器
- vue项目打包后字体文件路径出错的解决办法
- vue 外卖app(2) stylus
- vue项目无法删除