關(guān)于vue中api統(tǒng)一管理的那些事
更新時間：2022年04月11日 08:41:40 作者：知你故來風(fēng)
最近在學(xué)習(xí)Vue教程,下面這篇文章主要給大家介紹了關(guān)于vue中api統(tǒng)一管理的那些事,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
前情提要
正常寫小項目的時候，關(guān)于請求接口的存放可能沒有那么在意，畢竟縱觀整個項目可能也就那么十幾二十個接口，當(dāng)出現(xiàn)問題進(jìn)行定位的時候也能很輕松的定位到。
但是當(dāng)接口的數(shù)量達(dá)到百級的時候，出現(xiàn)接口調(diào)整等的問題時就會出現(xiàn)捉襟見肘的情況，再多點可能改一個api接口就要找好久。而且有的接口可能好多地方用，如果這個接口發(fā)生更好，好家伙，光修改個接口地址或者參數(shù)什么的就得要一兩個小時，太影響效率和開發(fā)心情。
此時將api模塊解耦出來就顯得尤為重要。現(xiàn)在收集到了api統(tǒng)一管理的幾種方案，各有千秋，具體優(yōu)劣還有待各位看官的探討。
針對的是vue腳手架項目，不是在html中引入vue的項目。
針對小項目而言（沒有單獨二次封裝axios）
無需管理，直接干。僅限于接口數(shù)量在20-30的
上代碼：
<script>
import axios from 'axios';
export default {
methods: {
async request() {
let data = {}
try {
// host指的是請求的域名，path指的是請求的路徑， data是相關(guān)的參數(shù)和請求頭配置
let res = await axios.post(`${host}${path}`, {
data
})
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>統(tǒng)一api.js文件管理
將所有的api的接口信息都寫在一個js文件里去維護。頁面接口請求直接引入即可
- 在根目錄下創(chuàng)建api文件夾，然后創(chuàng)建index.js
export default {
getInfo: 'https://xxx.x.com/getinfo'
}- 具體頁面使用
<script>
import axios from 'axios';
import api from '@/api/index';
export default {
methods: {
async request() {
let data = {}
try {
let res = await axios.post(api.getInfo, {
data
})
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>針對非小型項目而言（進(jìn)行axios的二次封裝）
關(guān)于axios二次封裝的問題在這里就不做過得贅述了，有小白不懂得可以聯(lián)系我。
對于接口數(shù)量超過50的來說，還是用上述的方式去請求接口，此時無論是對于維護還是升級而言都不是很友好，此時我們需要更便利的方案。
api統(tǒng)一管理 + 掛載到vue實例上 + 單模塊
思路：在api統(tǒng)一管理時，不僅僅管理請求地址，而是直接寫一個request的請求方法，通過接受一些參數(shù)來實現(xiàn)多變性。
- api/index.js
import 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')- 頁面上得使用
<script>
import HelloWorld from './components/HelloWorld.vue'
import api from '@/api/index';
export default {
methods: {
async request() {
let data = {}
try {
let res = await this.$api.getInfo(data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>api統(tǒng)一管理 + 掛載到vue實例上 + 多模塊
- 優(yōu)點：可以在任意位置調(diào)用接口
- 缺點：如果接口數(shù)量足夠大，掛載到vue實例上得數(shù)據(jù)過多，可能會造成性能問題
- api/modules/account.js
import account from '@/utils/axios'
export default {
getInfo(params) {
return request({
url: '/xxx/xxx/xxx',
method: 'post/get',
params, // 如果是get請求的話
data: params // 如果是post請求的話
})
}
}- api/index.js
import 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')- 頁面上的使用
<script>
import HelloWorld from './components/HelloWorld.vue'
import api from '@/api/index';
export default {
methods: {
async request() {
let data = {}
try {
let res = await this.$api.account.getInfo(data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>api統(tǒng)一管理 + vuex + 單模塊
思路：api統(tǒng)一管理的方式不變，但是由掛載到vue實例上改成vuex 優(yōu)點：在不掛載到vue實例的基礎(chǔ)上可以在任何頁面隨意調(diào)用任何接口 缺點：為了保證在刷新頁面不會報錯的情況下就需要在api模塊寫一個接口配置，同時在store模塊也需要寫一次，比較繁瑣。
- 在api/index.js的寫法不變。
- main.js中的相關(guān)掛載代碼刪除
- store/index.js
import 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)
}
}
})- 在頁面中
<script>
export default {
methods: {
async request() {
let data = {}
try {
let res = await this.$store.dispatch('getInfo', data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>當(dāng)然你也可以使用mapActions
<script>
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions([ 'getInfo' ])
async request() {
let data = {}
try {
let res = await this.getInfo(data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>api統(tǒng)一管理 + vuex + 多模塊
優(yōu)點：可以在頁面的任何位置進(jìn)行調(diào)用 缺點：新增刪除修改同一個接口，需要同時維護兩個文件
- 對于api文件而言，此時各個模式是相互獨立的：api/account.js
import 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.js
import api from '@/api/account';
export default {
namespaced: true,
actions: {
getInfo(store, params) {
return api.getInfo(params)
}
}
}- store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import account from './modules/account';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
account
}
})- 在頁面中
<script>
export default {
methods: {
async request() {
let data = {}
try {
let res = await this.$store.dispatch('account/getInfo', data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>總結(jié)
目前就這些方法，各有千秋。
到此這篇關(guān)于vue中api統(tǒng)一管理的文章就介紹到這了,更多相關(guān)vue api統(tǒng)一管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
常見的打印有JavaScript打印、jQuery、vue打印,這里主要講述vue使用vue-print-nb進(jìn)行打印,廢話不多說,直接手摸手上代碼,感興趣的朋友可以參考下2024-01-01
最近在學(xué)習(xí)vue,發(fā)現(xiàn)了vue的好多坑,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)登錄記住賬號密碼功能的思路與過程,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
這篇文章主要介紹了vue中的axios配置及接口請求路徑api配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章給大家詳細(xì)分析了vue組件開發(fā)腳手架的相關(guān)內(nèi)容以及知識點，對此有興趣的朋友可以學(xué)習(xí)參考下。2018-06-06
這篇文章主要介紹了如何使用HBuilderX把vue項目打包成apk，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
圖文講解用vue-cli腳手架創(chuàng)建vue項目步驟
本次小編給大家?guī)淼氖顷P(guān)于用vue-cli腳手架創(chuàng)建vue項目步驟講解內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2019-02-02
這篇文章主要介紹了vue 點擊展開顯示更多(點擊收起部分隱藏)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
下面小編就為大家?guī)硪黄趘ue.js路由參數(shù)的實例講解——簡單易懂。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
如何在Vue3中正確使用ElementPlus,親測有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測有效,避坑！具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
element-ui組件table實現(xiàn)自定義篩選功能的示例代碼
這篇文章主要介紹了element-ui組件table實現(xiàn)自定義篩選功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03