axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作
前言:
很多時(shí)候,我們可能需要同時(shí)調(diào)用多個(gè)后臺(tái)接口,就會(huì)高并發(fā)的問題,一般解決這個(gè)問題方法:
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ù)的操作說需要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)文章
element-ui 關(guān)于獲取select 的label值方法
今天小編就為大家分享一篇element-ui 關(guān)于獲取select 的label值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue-cli系列之vue-cli-service整體架構(gòu)淺析
這篇文章主要介紹了vue-cli系列之vue-cli-service整體架構(gòu)淺析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue2.0使用嵌套路由實(shí)現(xiàn)頁(yè)面內(nèi)容切換/公用一級(jí)菜單控制頁(yè)面內(nèi)容切換(推薦)
這篇文章主要介紹了Vue2.0使用嵌套路由實(shí)現(xiàn)頁(yè)面內(nèi)容切換/公用一級(jí)菜單控制頁(yè)面內(nèi)容切換,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue.js父子組件傳參的原理與實(shí)現(xiàn)方法
這篇文章主要介紹了vue.js父子組件傳參的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js父子組件傳參的基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2023-04-04

