vue全局api有哪些,vue接口统一管理
最近学了Vue教程。下面这篇文章主要介绍关于vue中API统一管理的事情。通过示例代码详细介绍，对大家学习或使用vue有一定的参考价值。有需要的朋友可以参考一下。
目录
前情提要小项目(axios没有单独的二次包)，直接做，不用管理。仅限20-30个接口的统一api.js文件管理。对于非小型项目(axios的二次封装)，统一管理api挂载在vue实例上，统一管理单模块api挂载在vue实例上，统一管理多模块api挂载在Vue实例上，统一管理vuex单模块api就是统一管理vuex多模块汇总
前情提要
正常写小项目的时候，可能不会那么在意请求接口的存储。毕竟整个项目可能只有十几二十个接口，出现问题的时候很容易定位。
但当接口数量达到百级时，就会出现接口调整等问题，情况就会捉襟见肘。如果接口多了，换一个api接口要花很长时间。而且，有些接口可能用在很多地方。如果这个接口发生的比较好，小子，光是修改一个接口地址或者参数就要一两个小时，太影响效率和开发心情了。
此时，api模块的解耦就显得尤为重要。现在我们收集了几种api统一管理的方案，各有千秋，具体利弊有待官方讨论。
它针对的是vue脚手架项目，而不是在html中引入vue的项目。
针对小项目而言（没有单独二次封装axios）
无需管理，直接干。仅限于接口数量在20-30的
上部代码：
脚本
从“axios”导入axios；
导出默认值{
方法：{
异步请求(){
让数据={}
尝试{
//host是指请求的域名，path是指请求的路径，data是相关的参数和请求头配置。
let RES=await axios . post(` $ { host } $ { path } `，{
数据
})
console.log(res)
} catch(err) {
这个。$message.error(err.message)
}
}
}
}
/脚本
统一api.js文件管理
将所有api接口信息写在一个js文件中，以便维护。可以直接引入接口请求。
在根目录下创建api文件夹，然后创建index.jsexport default {
getInfo: https://XXX . x . com/getInfo
}
对特定页面使用脚本。
从“axios”导入axios；
从“@/api/index”导入API；
导出默认值{
方法：{
异步请求(){
让数据={}
尝试{
let RES=await axios . post(API . getinfo，{
数据
})
console.log(res)
} catch(err) {
这个。$message.error(err.message)
}
}
}
}
/脚本
针对非小型项目而言（进行axios的二次封装）
关于axios的二次包装，这里就不赘述了。如果小白不知道，请联系我。
对于50个以上接口的，无论是维护还是升级，用上述方式请求接口都不是很友好。这个时候，我们需要一个更便捷的解决方案。
api统一管理 + 挂载到vue实例上 + 单模块
思路：在api的统一管理中，不仅要管理请求地址，还要直接写一个请求的请求方法，通过接受一些参数来实现可变性。
来自 @/utils/axios 的api/index.jsimport请求
导出默认值{
getInfo(params) {
退货请求({
网址：/xxx/xxx/xxx ，
方法：“post/get”，
Params，//如果是get请求
Data: params //如果是post请求
})
}
}
从main.js中的“vue”导入Vue
从导入应用程序。/App.vue
从“@/api/index”导入API；
Vue.prototype. $ api=api
Vue.config.productionTip=false
新Vue({
render: h=h(App)，
}).$ mount(“# app”)
在页面上使用脚本
从导入HelloWorld。/components/HelloWorld.vue
从“@/api/index”导入API；
导出默认值{
方法：{
异步请求(){
让数据={}
尝试{
让res=等待这个。$api.getInfo(数据)
console.log(res)
} catch(err) {
这个。$message.error(err.message)
}
}
}
}
/脚本
api统一管理 + 挂载到vue实例上 + 多模块
优点：可以在任意位置调用接口缺点：如果接口数量足够大，挂载到某视频剪辑软件实例上得数据过多，可能会造成性能问题API/模块/帐户。射流研究…从@/utils/axios 导入帐户
导出默认值{
getInfo(params) {
退货请求({
网址：/xxx/xxx/xxx ，
方法：“发布/获取”，
参数，//如果是得到请求的话
数据：params //如果是邮政请求的话
})
}
}
API/指数。射流研究…从导入帐户。/模块/帐户
导出默认值{
账户
}
在主页。射流研究…里从“vue”导入某视频剪辑软件
从导入应用程序 App.vue
从" @/api/index "导入API
Vue.prototype. $ api=api
Vue.config.productionTip=false
新Vue({
render: h=h(App)，
}).$ mount("# app ")
页面上的使用脚本
从导入你好世界./components/HelloWorld.vue
从" @/api/index "导入API
导出默认值{
方法：{
异步请求(){
让数据={}
尝试{
让res=等待这个api.account.getInfo(数据)
console.log(res)
} catch(err) {
这个消息错误(err.message)
}
}
}
}
/脚本
api统一管理 + vuex + 单模块
思路：api统一管理的方式不变，但是由挂载到某视频剪辑软件实例上改成状态管理优点：在不挂载到某视频剪辑软件实例的基础上可以在任何页面随意调用任何接口缺点：为了保证在刷新页面不会报错的情况下就需要在美国石油学会(美国石油协会)模块写一个接口配置，同时在商店模块也需要写一次，比较繁琐。
在api/index.js的写法不变主页. js中的相关挂载代码删除存储/索引。射流研究…从“Vue”导入Vue
从" Vuex "导入Vuex
从" @/api/index "导入API
vue。使用(Vuex)；
导出默认的新Vuex .商店({
动作：{
getInfo(store，params) {
返回api.getInfo(参数)
}
}
})
在页面中脚本
导出默认值{
方法：{
异步请求(){
让数据={}
尝试{
让res=等待这个store.dispatch(getInfo ，data)
console.log(res)
} catch(err) {
这个消息错误(err.message)
}
}
}
}
/脚本
当然你也可以使用地图操作
脚本
从" vuex "导入{地图操作}；
导出默认值{
方法：{
.mapActions([ getInfo ])
异步请求(){
让数据={}
尝试{
让RES=等这个。getinfo(数据)
console.log(res)
} catch(err) {
这个消息错误(err.message)
}
}
}
}
/脚本
api统一管理 + vuex + 多模块
优点：可以在页面的任何位置进行调用缺点：新增删除修改同一个接口，需要同时维护两个文件
对于美国石油学会(美国石油协会)文件而言，此时各个模式是相互独立的：来自" @/utils/axios "的api/account.jsimport请求
导出默认值{
getInfo(params) {
退货请求({
网址：/xxx/xxx/xxx ，
方法：“发布/获取”，
参数，//如果是得到请求的话
数据：params //如果是邮政请求的话
})
}
}
商店/模块/账户。射流研究…从" @/API/帐户"导入API
导出默认值{
命名空间：对，
动作：{
getInfo(store，params) {
返回api.getInfo(参数)
}
}
}
存储/索引。射流研究…从“Vue”导入Vue
从" Vuex "导入Vuex
从导入帐户。/模块/帐户；
vue。使用(Vuex)；
导出默认的新Vuex .商店({
模块：{
账户
}
})
在页面中脚本
导出默认值{
方法：{
异步请求(){
让数据={}
尝试{
让res=等待这个100美元商店。派遣(帐户/getInfo ，数据)
console.log(res)
} catch(err) {
这个消息错误(err.message)
}
}
}
}
/脚本
总结
目前就这些方法，各有千秋。
到此这篇关于某视频剪辑软件中美国石油学会(美国石油协会)统一管理的文章就介绍到这了，更多相关武亚皮统一管理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。