JavaScript如何利用Promise控制并發(fā)請求個數
一、場景
假設現(xiàn)在有這么一種場景：現(xiàn)有 30 個異步請求需要發(fā)送，但由于某些原因，我們必須將同一時刻并發(fā)請求數量控制在 5 個以內，同時還要盡可能快速的拿到響應結果。
如圖所示：
上圖這樣的排隊和并發(fā)請求的場景基本類似，窗口只有三個，人超過三個之后，后面的人只能排隊了。
二、串行和并行
- 串行：一個異步請求完了之后在進行下一個請求
- 并行：多個異步請求同時進行
串行舉例：
var p = function () {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log("1000");
resolve();
}, 1000);
});
};
var p1 = function () {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log("2000");
resolve();
}, 2000);
});
};
var p2 = function () {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log("3000");
resolve();
}, 3000);
});
};
p()
.then(() => {
return p1();
})
.then(() => {
return p2();
})
.then(() => {
console.log("end");
});
如示例，串行會從上到下依次執(zhí)行對應接口請求。
并行舉例：
通常，我們在需要保證代碼在多個異步處理之后執(zhí)行，會用到：
Promise.all((promises: [])).then((fun: function));
Promise.all可以保證，promises數組中所有promise對象都達到resolve狀態(tài)，才執(zhí)行then回調。
var promises = function () {
return [1000, 2000, 3000].map((current) => {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log(current);
}, current);
});
});
};
Promise.all(promises()).then(() => {
console.log("end");
});
這時候考慮一個場景：
如果你的promises數組中每個對象都是http請求，而這樣的對象有幾十萬個。
那么會出現(xiàn)的情況是，你在瞬間發(fā)出幾十萬個http請求，這樣很有可能導致堆積了無數調用棧導致內存溢出。
這時候，我們就需要考慮對Promise.all做并發(fā)限制。
Promise.all并發(fā)限制指的是，每個時刻并發(fā)執(zhí)行的promise數量是固定的，最終的執(zhí)行結果還是保持與原來的Promise.all一致。
三、代碼實現(xiàn)
整體采用遞歸調用來實現(xiàn)：最初發(fā)送的請求數量上限為允許的最大值，并且這些請求中的每一個都應該在完成時繼續(xù)遞歸發(fā)送，通過傳入的索引來確定了urls里面具體是那個URL，保證最后輸出的順序不會亂，而是依次輸出。
代碼：
function multiRequest(urls, maxNum) {
const len = urls.length; // 請求總數量
const res = new Array(len).fill(0); // 請求結果數組
let sendCount = 0; // 已發(fā)送的請求數量
let finishCount = 0; // 已完成的請求數量
return new Promise((resolve, reject) => {
// 首先發(fā)送 maxNum 個請求，注意：請求數可能小于 maxNum，所以也要滿足條件2
// 同步的 創(chuàng)建maxNum個next并行請求 然后才去執(zhí)行異步的fetch 所以一上來就有5個next并行執(zhí)行
while (sendCount < maxNum && sendCount < len) {
next();
}
function next () {
let current = sendCount ++; // 當前發(fā)送的請求數量，后加一 保存當前請求url的位置
// 遞歸出口
if (finishCount >= len) {
// 如果所有請求完成，則解決掉 Promise，終止遞歸
resolve(res);
return;
}
const url = urls[current];
fetch(url).then(result => {
finishCount ++;
res[current] = result;
if (current < len) { // 如果請求沒有發(fā)送完，繼續(xù)發(fā)送請求
next();
}
}, err => {
finishCount ++;
res[current] = err;
if (current < len) { // 如果請求沒有發(fā)送完，繼續(xù)發(fā)送請求
next();
}
});
}
});
}
總結：
代碼在while循環(huán)處創(chuàng)建了maxNum個"請求窗口"來進行請求，從而達到并行效果，然后next函數中進行異步請求，然后通過在.then里面進行遞歸進行新請求的調用，實現(xiàn)"一個窗口只進行一個請求，當這個請求執(zhí)行完成后才進行下一個請求"（每個窗口串行執(zhí)行，maxNum個窗口并行執(zhí)行）。
到此這篇關于JavaScript如何利用Promise控制并發(fā)請求個數的文章就介紹到這了,更多相關js用Promise控制并發(fā)請求內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
參考鏈接
相關文章
這篇文章主要介紹了如何使用HTML和JavaScript加載、讀取、縮放和繪制圖片到canvas上的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了ECMAScript6函數默認參數的相關資料,需要的朋友可以參考下2015-06-06
在js中我們有時會遇到計算,通過加減乘除處理某些業(yè)務,那么這時候如果不做任何處理,就會出現(xiàn)如下典型的精度丟失問題,下面這篇文章主要給大家介紹了關于JS中浮點數精度問題的分析與解決方法,需要的朋友可以參考下2022-04-04
JavaScript詳解使用Promise處理回調地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調地獄與async?await修飾符，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
MQTT.js?是一個開源的?MQTT 協(xié)議的客戶端庫，使用 JavaScript 編寫，主要用于 Node.js 和 瀏覽器環(huán)境中，這篇文章主要介紹了MQTT.js 入門教程,需要的朋友可以參考下2023-04-04
waypoints的功能非常強大，一款用于捕獲各種滾動事件的插件，下面跟隨腳本之家小編一起學習JS庫之Waypoints的用法吧2017-09-09
微信H5支付是一種支付解決方案,主要適用于商戶在微信客戶端外的移動端網頁上展示商品或服務的場景,這篇文章主要給大家介紹了關于微信公眾號h5使用微信支付及支付寶支付(前端)的相關資料,需要的朋友可以參考下2024-07-07
JavaScript/jQuery實現(xiàn)切換頁面效果
這篇文章主要為大家詳細介紹了JavaScript或jQuery實現(xiàn)切換頁面效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹了微信小程序簡潔登錄頁面的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
js在指定位置增加節(jié)點函數insertBefore()用法實例
這篇文章主要介紹了js在指定位置增加節(jié)點函數insertBefore()用法,實例分析了insertBefore()函數追加結點的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01