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 == 方法二的返回值
}));
補(bǔ)充知識：axios.all及Promise.all合并多個請求且都返回數(shù)據(jù)后進(jìn)行其他操作
很多時候，我們需要同時向后端進(jìn)行多個請求，當(dāng)所有請求都返回數(shù)據(jù)后，再進(jìn)行一些操作。
比如：初始化頁面時，可能需要初始化一些基礎(chǔ)數(shù)據(jù)，才能進(jìn)行操作。
獲取這些基礎(chǔ)數(shù)據(jù)，可能需要向后端發(fā)送request1，request2。。。
等多個請求，而后續(xù)的操作說需要request1，request2等都正確返回數(shù)據(jù)后才能進(jìn)行。
在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ù)組
///進(jìn)行你的下一步操作
});
以上這篇axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中
這篇文章主要介紹了vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
最近寫vue的一個練手項目需要在里面實現(xiàn)一個輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了關(guān)于vue.js過渡css類名的理解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-04-04
VUE實現(xiàn)Studio管理后臺之鼠標(biāo)拖放改變窗口大小
這篇文章主要介紹了VUE實現(xiàn)Studio管理后臺之鼠標(biāo)拖放改變窗口大小 的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的工作或?qū)W習(xí)具有一定的參考價值,需要的朋友可以參考下2020-03-03
這篇文章介紹了Vue.js中v-for指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用示例
在Vue3中要獲取子組件的DOM節(jié)點,你可以使用ref來引用子組件,然后通過$refs來訪問子組件的DOM,下面這篇文章主要給大家介紹了關(guān)于vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用的相關(guān)資料,需要的朋友可以參考下2024-07-07
在vue中會將常用的組件進(jìn)行封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件封裝之input輸入框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
vue form check 表單驗證的實現(xiàn)代碼
這篇文章主要介紹了vue form check 表單驗證的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了Vue自定義指令的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07