關(guān)于vue中api統(tǒng)一管理的那些事
更新時間：2022年04月11日 08:41:40 作者：知你故來風(fēng)
最近在學(xué)習(xí)Vue教程,下面這篇文章主要給大家介紹了關(guān)于vue中api統(tǒng)一管理的那些事,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
前情提要
正常寫小項目的時候，關(guān)于請求接口的存放可能沒有那么在意，畢竟縱觀整個項目可能也就那么十幾二十個接口，當(dāng)出現(xiàn)問題進行定位的時候也能很輕松的定位到。
但是當(dāng)接口的數(shù)量達到百級的時候，出現(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>針對非小型項目而言（進行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)點：可以在頁面的任何位置進行調(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)文章
這篇文章主要介紹了vue項目檢測依賴包是否有使用的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue form表單動態(tài)添加組件實戰(zhàn)案例
這篇文章主要介紹了Vue form表單動態(tài)添加組件實戰(zhàn)案例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
element?ui?watch?el-input賦值之后無法刪除或修改問題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無法刪除或修改問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
在vue3中,?提供了一個?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個組件,?把?elementPlus?中的期中一個組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下2023-09-09
VUE使用vue?create命令創(chuàng)建vue2.0項目的全過程
vue-cli是創(chuàng)建Vue項目的一個腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項目的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07
在項目開發(fā)過程中,可能需要實現(xiàn)以下場景,未讀消息提示、報警信息、消息通知等,下面這篇文章主要給大家介紹了關(guān)于vue通知提醒消息的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue中.env、.env.development及.env.production文件說明
這篇文章主要給大家介紹了關(guān)于Vue中.env、.env.development及.env.production文件說明的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue 實現(xiàn)圖片懶加載功能的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue+springboot實現(xiàn)項目的CORS跨域請求
這篇文章主要介紹了vue+springboot實現(xiàn)項目的CORS跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
優(yōu)雅的將ElementUI表格變身成樹形表格的方法步驟
這篇文章主要介紹了優(yōu)雅的將ElementUI表格變身成樹形表格的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04