脚本宝典收集整理的这篇文章主要介绍了论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'

这种方法的缺点：

1. 新增一个借口就新增一个方法
2. 任何需要调用借口的地方都需要引入
3. api文件里只有url和函数名不一样,其他都一样,应该封装到一起
4. 查看所有接口需一个一个函数去看,麻烦
@H_406_115@

版本二：
干脆不把api统一到一起，把axios挂载到vue对象上只在需要的地方写

this.$axios.post(url,params).then()

这种方法缺点：

1. 如果修改url路径,需要全局搜索替换改动地方较多
2. 无法查看所有接口，不便于全局掌控

版本三:

// 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()

缺点：

1. 暂时没想到

优点:

1. 更改url时只需要改动一个地方
2. 可以在一个地方查看所有接口

脚本宝典总结

以上是脚本宝典为你收集整理的论vue项目api相关代码的组织方式全部内容，希望文章能够帮你解决论vue项目api相关代码的组织方式所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。