關(guān)于promise.all()的使用及說明

更新時(shí)間：2023年04月25日 09:15:09 作者：微笑的魚_

這篇文章主要介紹了關(guān)于promise.all()的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

關(guān)于promise.all()的使用

Promise.all可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise實(shí)例。

同時(shí)，成功和失敗的返回值是不同的，成功的時(shí)候返回的是一個(gè)結(jié)果數(shù)組，而失敗的時(shí)候則返回最先被reject失敗狀態(tài)的值。

關(guān)鍵代碼：將所有異步操作存儲(chǔ)到數(shù)組pros中，Promise.all(pros)執(zhí)行所有異步操作

let pros = []
data.forEach(element => {
?? ?pros.push( this.getJsonFile(element.json,element.fileName) )
});
Promise.all(pros).then(val => {
?? ?this.fontsList = [...val]
})

示例：

// 獲取字體所有json文件展示
getIconFonts(isFresh) {
?? ?req.post(window.context.uc+`/system/file/v1/queryIconFiles`).then(rep => {
?? ??? ?if(rep && rep.data) {
?? ??? ??? ?// 將所有異步操作存儲(chǔ)到數(shù)組pros中
?? ??? ??? ?let pros = []
?? ??? ??? ?data.forEach(element => {
?? ??? ??? ??? ?pros.push( this.getJsonFile(element.json,element.fileName) )
?? ??? ??? ?});
?? ??? ??? ?// 執(zhí)行所有異步操作后處理數(shù)據(jù)
?? ??? ??? ?Promise.all(pros).then(val => {
?? ??? ??? ??? ?this.fontsList = [...val]
?? ??? ??? ??? ?this.uploadFonts = [...this.fontsList]
?? ??? ??? ?})
?? ??? ?}
?? ?});
},
// 通過id獲取json文件
getJsonFile(fileId, fileName) {
?? ?return new Promise((resolve, reject) => {
?? ??? ?req.get(window.context.uc +'/system/file/v1/preview?fileId=' + fileId).then(rep => {
?? ??? ??? ?if(rep && rep.data) {
?? ??? ??? ??? ?let data = {
?? ??? ??? ??? ??? ?fileName,
?? ??? ??? ??? ??? ?...rep.data
?? ??? ??? ??? ?}
?? ??? ??? ??? ?// 返回處理后的數(shù)據(jù)
?? ??? ??? ??? ?resolve(data)
?? ??? ??? ?}
?? ??? ?})
?? ?})
}

Promise.all實(shí)現(xiàn)限制并發(fā)請求函數(shù)

Promise.all 的簡單解釋

// 當(dāng)以下數(shù)組中promise1, promise2, promise3都resolve之后，觸發(fā)promise.all的then函數(shù)。
Promise.all([promise1, promise2, promise3]).then((values) => {
? console.log(values);
});

需求解釋

所謂并發(fā)請求，即有待請求接口100個(gè)，限制每次只能發(fā)出10個(gè)。即同一時(shí)刻最多有10個(gè)正在發(fā)送的請求。

每當(dāng)10個(gè)之中有一個(gè)請求完成，則從待請求的接口中再取出一個(gè)發(fā)出。保證當(dāng)前并發(fā)度仍舊為10。

直至最終請求完成。

設(shè)計(jì)思路

簡單思路如下：（假設(shè)并發(fā)請求函數(shù)名字為limitedRequest）

設(shè)定一個(gè)數(shù)組（命名為：pool），用于后續(xù)Promise.all的使用
當(dāng)limitedRequest被調(diào)用的時(shí)候，首先一次性發(fā)出10個(gè)請求，并放入到pool中
每一個(gè)請求完成后的回調(diào)函數(shù)中繼續(xù)觸發(fā)下一個(gè)請求，而下一個(gè)請求返回Promise，他的回調(diào)函數(shù)繼續(xù)綁定同樣的回調(diào)函數(shù)，即循環(huán)調(diào)用。（看不懂就直接看代碼更易懂）
直到全部請求完成，停止。

代碼實(shí)現(xiàn)

具體代碼如下

// 模仿一個(gè)fetch的異步函數(shù)，返回promise
function mockFetch(param) {
? return new Promise((resovle) => {
? ? setTimeout(() => {
? ? ? resovle(param);
? ? }, 2000);
? });
}

function limitedRequest(urls, maxNum) {
? const pool = [];
? // 處理maxNum比urls.length 還要大的情況。
? const initSize = Math.min(urls.length, maxNum);
? for (let i = 0; i < initSize; i++) {
? ?? ?// 一次性放入初始的個(gè)數(shù)
? ? pool.push(run(urls.splice(0, 1)));
? }
? // r 代表promise完成的resolve回調(diào)函數(shù)
? // r 函數(shù)無論什么樣的結(jié)果都返回promise，來確保最終promise.all可以正確執(zhí)行
? function r() {
? ? console.log('當(dāng)前并發(fā)度：', pool.length);
? ? if (urls.length === 0) {
? ? ? console.log('并發(fā)請求已經(jīng)全部發(fā)起');
? ? ? return Promise.resolve();
? ? }
? ? return run(urls.splice(0, 1));
? }
? // 調(diào)用一次請求
? function run(url) {
? ? return mockFetch(url).then(r);
? }
? // 全部請求完成的回調(diào)
? Promise.all(pool).then(() => {
? ? console.log('請求已經(jīng)全部結(jié)束');
? });
}
// 函數(shù)調(diào)用
limitedRequest([1, 2, 3, 4, 5, 6, 7, 8], 3);

# 最終返回結(jié)果
$ node .\src\views\doc\detail\index.js
當(dāng)前并發(fā)度： 3
當(dāng)前并發(fā)度： 3
當(dāng)前并發(fā)度： 3
當(dāng)前并發(fā)度： 3
當(dāng)前并發(fā)度： 3
當(dāng)前并發(fā)度： 3
并發(fā)請求已經(jīng)全部發(fā)起
當(dāng)前并發(fā)度： 3
并發(fā)請求已經(jīng)全部發(fā)起
當(dāng)前并發(fā)度： 3
并發(fā)請求已經(jīng)全部發(fā)起
請求已經(jīng)全部結(jié)束