vue如何解決多個(gè)異步請(qǐng)求問題
vue一個(gè)頁面很多接口時(shí)，異步請(qǐng)求的優(yōu)化
1.使用 Promise.all()
Promise.all() 方法接收一個(gè)promise的iterable類型（注：Array，Map，Set都屬于ES6的iterable類型）的輸入，并且只返回一個(gè)Promise實(shí)例， 那個(gè)輸入的所有promise的resolve回調(diào)的結(jié)果是一個(gè)數(shù)組。
這個(gè)Promise的resolve回調(diào)執(zhí)行是在所有輸入的promise的resolve回調(diào)都結(jié)束，或者輸入的iterable里沒有promise了的時(shí)候。
它的reject回調(diào)執(zhí)行是，只要任何一個(gè)輸入的promise的reject回調(diào)執(zhí)行或者輸入不合法的promise就會(huì)立即拋出錯(cuò)誤，并且reject的是第一個(gè)拋出的錯(cuò)誤信息
let p1 = new Promise((resolve, reject) => {
getNumber()
resolve('成功了p1')
})
let p2 = new Promise((resolve, reject) => {
getName()
resolve('成功了p2')
})
let p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([p1, p2, p3]).then((result) => {
console.log(result) // ['成功了p1', '成功了p2', 'foo']
}).catch((error) => {
})Promise.all 在任意一個(gè)傳入的 promise 失敗時(shí)返回失敗。
例如：
如果你傳入的 promise中，有四個(gè) promise 在一定的時(shí)間之后調(diào)用成功函數(shù)，有一個(gè)立即調(diào)用失敗函數(shù)，那么 Promise.all 將立即變?yōu)槭 ?/p>
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
reject('reject');
});
Promise.all([p1, p2, p3]).then(values => {
console.log(values);
}).catch(reason => {
console.log(reason)
});2.Promise.race(iterable) 方法返回一個(gè) promise
一旦迭代器中的某個(gè)promise解決或拒絕，返回的 promise就會(huì)解決或拒絕。
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function(value) {
console.log(value); // "two"
// 兩個(gè)都完成，但 p2 更快
});3.Promise.all()與Promise.race()請(qǐng)求時(shí)的區(qū)別
Promise.all()適合于后面的異步請(qǐng)求接口依賴前面的接口請(qǐng)求的數(shù)據(jù)時(shí)使用。Promise.race()沒有先后順序，那個(gè)先請(qǐng)求回來那個(gè)先顯示
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue2(三)實(shí)現(xiàn)子菜單展開收縮，帶動(dòng)畫效果實(shí)現(xiàn)方法
這篇文章主要介紹了vue實(shí)現(xiàn)收縮展開效果的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue2?web多標(biāo)簽輸入框elinput是否當(dāng)前焦點(diǎn)詳解
這篇文章主要介紹了vue2?web多標(biāo)簽輸入框elinput是否當(dāng)前焦點(diǎn)的相關(guān)資料,講解了如何在產(chǎn)品中實(shí)現(xiàn)用戶輸入文字后按下回車鍵生成標(biāo)簽并顯示在頁面上的功能,通過組件的使用和改造,解決了輸入不連續(xù)的問題,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue全局組件與局部組件的區(qū)別，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
項(xiàng)目需求需要引入地圖,對(duì)于目前最新的Vue3.0,無論是百度/高德/騰訊地圖目前還沒有適配,只有Vue?2.x版本的:?目前只有谷歌地圖的Vue3.0適配,下面這篇文章主要給大家介紹了關(guān)于如何在vue3項(xiàng)目中使用新版高德地圖的完整步驟,需要的朋友可以參考下2023-02-02
vue 在methods中調(diào)用mounted的實(shí)現(xiàn)操作
這篇文章主要介紹了vue 在methods中調(diào)用mounted的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在組件中增加的css加了scoped屬性之后,就在會(huì)在當(dāng)前這個(gè)組件的節(jié)點(diǎn)上增加一個(gè)data-v-xxx屬性,下面這篇文章主要給大家介紹了關(guān)于Vue中CSS?scoped原理的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
自從入了 Vue 之后，一直在用 axios 這個(gè)庫來做一些異步請(qǐng)求。下面這篇文章主要給大家介紹了關(guān)于axios中cookie跨域及相關(guān)配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧。2017-12-12
淺談vue中resetFields()使用注意事項(xiàng)
這篇文章主要介紹了淺談vue中resetFields()使用注意事項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08