axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作
前言:
很多時候,我們可能需要同時調(diào)用多個后臺接口,就會高并發(fā)的問題,一般解決這個問題方法:
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 == 方法二的返回值
}));
補充知識:axios.all及Promise.all合并多個請求且都返回數(shù)據(jù)后進行其他操作
很多時候,我們需要同時向后端進行多個請求,當(dāng)所有請求都返回數(shù)據(jù)后,再進行一些操作。
比如:初始化頁面時,可能需要初始化一些基礎(chǔ)數(shù)據(jù),才能進行操作。
獲取這些基礎(chǔ)數(shù)據(jù),可能需要向后端發(fā)送request1,request2。。。
等多個請求,而后續(xù)的操作說需要request1,request2等都正確返回數(shù)據(jù)后才能進行。
在axios官方文檔中對一次性并發(fā)多個請求示例如下:
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)這兩個請求都完成的時候會觸發(fā)這個函數(shù),兩個參數(shù)分別代表返回的結(jié)果
}))
但是很多時候,我們在項目中并不會直接去axios.get,axios請求可能都放在一個文件中,并且對加了攔截器等等。示例如下:
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為一個數(shù)組
///進行你的下一步操作
});
以上這篇axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui 關(guān)于獲取select 的label值方法
今天小編就為大家分享一篇element-ui 關(guān)于獲取select 的label值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue-cli系列之vue-cli-service整體架構(gòu)淺析
這篇文章主要介紹了vue-cli系列之vue-cli-service整體架構(gòu)淺析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue2.0使用嵌套路由實現(xiàn)頁面內(nèi)容切換/公用一級菜單控制頁面內(nèi)容切換(推薦)
這篇文章主要介紹了Vue2.0使用嵌套路由實現(xiàn)頁面內(nèi)容切換/公用一級菜單控制頁面內(nèi)容切換,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05

