本篇文章主要是分享了关于vue项目api相关代码的组织方式，有需要的朋友可以参考一下
论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项目api相关代码的组织方式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
738
