vue如何解決多個異步請求問題

更新時間：2025年04月09日 09:39:47 作者：魁望亦是雪

這篇文章主要介紹了vue如何解決多個異步請求問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue一個頁面很多接口時，異步請求的優(yōu)化

1.使用 Promise.all()

Promise.all() 方法接收一個promise的iterable類型（注：Array，Map，Set都屬于ES6的iterable類型）的輸入，并且只返回一個Promise實例，那個輸入的所有promise的resolve回調的結果是一個數組。

這個Promise的resolve回調執(zhí)行是在所有輸入的promise的resolve回調都結束，或者輸入的iterable里沒有promise了的時候。

它的reject回調執(zhí)行是，只要任何一個輸入的promise的reject回調執(zhí)行或者輸入不合法的promise就會立即拋出錯誤，并且reject的是第一個拋出的錯誤信息

     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 在任意一個傳入的 promise 失敗時返回失敗。

例如：

如果你傳入的 promise中，有四個 promise 在一定的時間之后調用成功函數，有一個立即調用失敗函數，那么 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) 方法返回一個 promise

一旦迭代器中的某個promise解決或拒絕，返回的 promise就會解決或拒絕。

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"
          // 兩個都完成，但 p2 更快
        });

3.Promise.all()與Promise.race()請求時的區(qū)別

Promise.all() 適合于后面的異步請求接口依賴前面的接口請求的數據時使用。
Promise.race() 沒有先后順序，那個先請求回來那個先顯示

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3父子傳值實現彈框功能的示例詳解
這篇文章主要為大家詳細介紹了vue3如何利用父子傳值實現彈框功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下
2023-12-12
vue-devtools?開發(fā)工具插件之支持vue3?chrome?瀏覽器插件
這篇文章主要介紹了vue-devtools?開發(fā)工具插件之支持vue3?chrome?瀏覽器插件,用這個版本主要是為了支持vue3?推薦直接下載，文中給大家提供了下載地址，感興趣的朋友跟隨小編一起看看吧
2022-01-01
Vue3中createWebHistory和createWebHashHistory的區(qū)別詳析
這篇文章主要給大家介紹了關于Vue3中createWebHistory和createWebHashHistory區(qū)別的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2023-06-06
vue.js全局API之nextTick全面解析
本篇文章主要介紹了vue.js全局API之nextTick全面解析，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法
這篇文章主要介紹了vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12
vue前端開發(fā)keepAlive使用詳解
在開發(fā)中經常有從列表跳到詳情頁，然后返回詳情頁的時候需要緩存列表頁的狀態(tài)（比如滾動位置信息），這個時候就需要保存狀態(tài)，要緩存狀態(tài)
2021-10-10
vue使用vuedraggable插件實現拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實現拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁面引入的方法,需要的朋友可以參考下
2024-04-04
vue 判斷頁面是首次進入還是再次刷新的實例
這篇文章主要介紹了vue 判斷頁面是首次進入還是再次刷新的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue實現多個tab標簽頁的切換與關閉詳細代碼
這篇文章主要給大家介紹了關于vue實現多個tab標簽頁的切換與關閉的相關資料,使用vue.js實現tab切換很簡單,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-10-10
簡單理解vue中實例屬性vm.$els
這篇文章主要幫助大家簡單理解vue中實例屬性vm.$els,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12