axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作
前言：
很多時(shí)候，我們可能需要同時(shí)調(diào)用多個(gè)后臺(tái)接口，就會(huì)高并發(fā)的問(wèn)題，一般解決這個(gè)問(wèn)題方法：
axios.all和axios.spread
***注意這里的$get是封裝的axios方法
//方法一：
searchTopic() {
return this.$axios({
url:'地址1',
method:'方式',//get/post/patch/put/deleted
params:{//參數(shù)get所以用params。post.put用data
}
})
}
//方法二：
searchs(){
return this.$axios({
url:'地址1',
method:'方式',//get/post/patch/put/deleted
params:{//參數(shù)get所以用params。post.put用data
}
})
},
axios.all([searchTopic(), searchs()])
.then(axios.spread(function (allSearchTopic, allSearchs) {
debugger//打印可以拿到所有的返回值
allSearchTopic == 方法一的返回值
allSearchs == 方法二的返回值
}));
補(bǔ)充知識(shí)：axios.all及Promise.all合并多個(gè)請(qǐng)求且都返回?cái)?shù)據(jù)后進(jìn)行其他操作
很多時(shí)候，我們需要同時(shí)向后端進(jìn)行多個(gè)請(qǐng)求，當(dāng)所有請(qǐng)求都返回?cái)?shù)據(jù)后，再進(jìn)行一些操作。
比如：初始化頁(yè)面時(shí)，可能需要初始化一些基礎(chǔ)數(shù)據(jù)，才能進(jìn)行操作。
獲取這些基礎(chǔ)數(shù)據(jù)，可能需要向后端發(fā)送request1，request2。。。
等多個(gè)請(qǐng)求，而后續(xù)的操作說(shuō)需要request1，request2等都正確返回?cái)?shù)據(jù)后才能進(jìn)行。
在axios官方文檔中對(duì)一次性并發(fā)多個(gè)請(qǐng)求示例如下：
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//當(dāng)這兩個(gè)請(qǐng)求都完成的時(shí)候會(huì)觸發(fā)這個(gè)函數(shù)，兩個(gè)參數(shù)分別代表返回的結(jié)果
}))
但是很多時(shí)候，我們?cè)陧?xiàng)目中并不會(huì)直接去axios.get,axios請(qǐng)求可能都放在一個(gè)文件中，并且對(duì)加了攔截器等等。示例如下：
export const cargoDayNumber = (data) => {
return axios.request({
url: '/api/zz-xt/statistical/areas',
method: 'post',
data: data
})
}
在vue文件中的使用如下：
let r1 = carVisitTime({ createTime: '2019-06-27' })
let r2 = statistic({ createTime: '2019-06-27' })
let r3 = cargoDayNumber({ createTime: '2019-07-01' })
let r4 = enterpriseRanking()
axios.all([r1, r2, r3, r4]).then(
axios.spread((r1, r2, r3, r4) => {
this.numberVehicleVisits = r1.data
this.loadingDateRank.loading = r2.data.loading
this.loadingDateRank.unloading = r2.data.unloading
this.loadingAreasRank.loadingRegionalList = r3.data.inflow
this.loadingAreasRank.unloadingRegionalList = r3.data.outflow
this.enterpriseLoadWeight.enterpriseLoadingRankList = r4.data.loadingRank
this.enterpriseLoadWeight.enterpriseUnloadingRankList = r4.data.unloadingRank
})
)
除了axios.all，我們也可以使用Promise.all，示例如下
Promise.all([p1, p2]).then(function(values) {
console.log(values);//values為一個(gè)數(shù)組
///進(jìn)行你的下一步操作
});
以上這篇axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中
這篇文章主要介紹了vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
最近寫(xiě)vue的一個(gè)練手項(xiàng)目需要在里面實(shí)現(xiàn)一個(gè)輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個(gè)插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
關(guān)于vue.js過(guò)渡css類名的理解(推薦)
這篇文章主要介紹了關(guān)于vue.js過(guò)渡css類名的理解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-04-04
VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小
這篇文章主要介紹了VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小 的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的工作或?qū)W習(xí)具有一定的參考價(jià)值,需要的朋友可以參考下2020-03-03
這篇文章介紹了Vue.js中v-for指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用示例
在Vue3中要獲取子組件的DOM節(jié)點(diǎn),你可以使用ref來(lái)引用子組件,然后通過(guò)$refs來(lái)訪問(wèn)子組件的DOM,下面這篇文章主要給大家介紹了關(guān)于vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用的相關(guān)資料,需要的朋友可以參考下2024-07-07
在vue中會(huì)將常用的組件進(jìn)行封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件封裝之input輸入框的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
vue form check 表單驗(yàn)證的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue form check 表單驗(yàn)證的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了Vue自定義指令的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07