vue中关于api统一管理那点事

　　前情提要
　　正常写小项目的时候，关于请求接口的存放可能没有那么在意，毕竟纵观整个项目可能也就那么十几二十个接口，当出现问题进行定位的时候也能很轻松的定位到。
　　但是当接口的数量达到百级的时候，出现接口调整等的问题时就会出现捉襟见肘的情况，再多点可能改一个api接口就要找好久。而且有的接口可能好多地方用，如果这个接口发生更好，好家伙，光修改个接口地址或者参数什么的就得要一两个小时，太影响效率和开发心情。
　　此时将api模块解耦出来就显得尤为重要。现在收集到了api统一管理的几种方案，各有千秋，具体优劣还有待各位看官的探讨。
　　针对的是vue脚手架项目，不是在html中引入vue的项目。针对小项目而言（没有单独二次封装axios）无需管理，直接干。仅限于接口数量在20-30的
　　上代码： 复制代码统一api.js文件管理
　　将所有的api的接口信息都写在一个js文件里去维护。页面接口请求直接引入即可在根目录下创建api文件夹，然后创建index.jsexport default {   getInfo: ＂https://xxx.x.com/getinfo＂ } 复制代码具体页面使用 复制代码针对非小型项目而言（进行axios的二次封装）
　　关于axios二次封装的问题可以直接点击链接查阅，有小白不懂得可以联系我。
　　对于接口数量超过50的来说，还是用上述的方式去请求接口，此时无论是对于维护还是升级而言都不是很友好，此时我们需要更便利的方案。api统一管理 + 挂载到vue实例上 + 单模块
　　思路：在api统一管理时，不仅仅管理请求地址，而是直接写一个request的请求方法，通过接受一些参数来实现多变性。api/index.jsimport request from ＂@/utils/axios＂ export default {   getInfo(params) {     return request({       url: ＂/xxx/xxx/xxx＂,       method: ＂post/get＂,       params, // 如果是get请求的话       data: params // 如果是post请求的话     })   } } 复制代码在main.js里import Vue from ＂vue＂ import App from ＂./App.vue＂ import api from ＂@/api/index＂; Vue.prototype.$api = api; Vue.config.productionTip = false new Vue({   render: h => h(App), }).$mount(＂#app＂) 复制代码页面上得使用 复制代码api统一管理 + 挂载到vue实例上 + 多模块优点：可以在任意位置调用接口缺点：如果接口数量足够大，挂载到vue实例上得数据过多，可能会造成性能问题api/modules/account.jsimport account from ＂@/utils/axios＂ export default {   getInfo(params) {     return request({       url: ＂/xxx/xxx/xxx＂,       method: ＂post/get＂,       params, // 如果是get请求的话       data: params // 如果是post请求的话     })   } } 复制代码api/index.jsimport account from ＂./modules/account＂ export default {   account } 复制代码在main.js里import Vue from ＂vue＂ import App from ＂./App.vue＂ import api from ＂@/api/index＂; Vue.prototype.$api = api; Vue.config.productionTip = false new Vue({   render: h => h(App), }).$mount(＂#app＂) 复制代码页面上的使用 复制代码api统一管理 + vuex + 单模块
　　思路：api统一管理的方式不变，但是由挂载到vue实例上改成vuex 优点：在不挂载到vue实例的基础上可以在任何页面随意调用任何接口 缺点：为了保证在刷新页面不会报错的情况下就需要在api模块写一个接口配置，同时在store模块也需要写一次，比较繁琐。在api/index.js的写法不变。main.js中的相关挂载代码删除store/index.jsimport Vue from ＂vue＂; import Vuex from ＂vuex＂; import api from ＂@/api/index＂; Vue.use(Vuex); export default new Vuex.Store({   action: {     getInfo(store, params) {       return api.getInfo(params)     }   } }) 复制代码在页面中 复制代码
　　当然你也可以使用mapActions 复制代码api统一管理 + vuex + 多模块
　　优点：可以在页面的任何位置进行调用 缺点：新增删除修改同一个接口，需要同时维护两个文件对于api文件而言，此时各个模式是相互独立的：api/account.jsimport request from ＂@/utils/axios＂ export default {   getInfo(params) {     return request({       url: ＂/xxx/xxx/xxx＂,       method: ＂post/get＂,       params, // 如果是get请求的话       data: params // 如果是post请求的话     })   } } 复制代码store/modules/account.jsimport api from ＂@/api/account＂; export default {     namespaced: true,     actions: {         getInfo(store, params) {           return api.getInfo(params)         }     } } 复制代码store/index.jsimport Vue from ＂vue＂; import Vuex from ＂vuex＂; import account from ＂./modules/account＂; Vue.use(Vuex); export default new Vuex.Store({   modules: {       account   } }) 复制代码在页面中 复制代码总结目前就这些方法，各有千秋。不知道各位还有没有更好的方法，在评论区打出来，将感激不尽...
　　作者：知你故来风
　　链接：https://juejin.cn/post/7084149728799096840