快捷導(dǎo)航

vue如何解決多個(gè)異步請求問題

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

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

vue一個(gè)頁面很多接口時(shí)，異步請求的優(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就會立即拋出錯(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就會解決或拒絕。

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 更快
        });