JavaScript如何利用Promise控制並發請求個數
一、場景
假設現在有這麼一種場景:現有 30 個異步請求需要發送,但由於某些原因,我們必須將同一時刻並發請求數量控制在 5 個以內,同時還要盡可能快速的拿到響應結果。
如圖所示:
上圖這樣的排隊和並發請求的場景基本類似,窗口隻有三個,人超過三個之後,後面的人隻能排隊瞭。
二、串行和並行
- 串行:一個異步請求完瞭之後在進行下一個請求
- 並行:多個異步請求同時進行
串行舉例:
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"); });
如示例,串行會從上到下依次執行對應接口請求。
並行舉例:
通常,我們在需要保證代碼在多個異步處理之後執行,會用到:
Promise.all((promises: [])).then((fun: function));
Promise.all可以保證,promises數組中所有promise對象都達到resolve狀態,才執行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請求,而這樣的對象有幾十萬個。
那麼會出現的情況是,你在瞬間發出幾十萬個http請求,這樣很有可能導致堆積瞭無數調用棧導致內存溢出。
這時候,我們就需要考慮對Promise.all做並發限制。
Promise.all並發限制指的是,每個時刻並發執行的promise數量是固定的,最終的執行結果還是保持與原來的Promise.all一致。
三、代碼實現
整體采用遞歸調用來實現:最初發送的請求數量上限為允許的最大值,並且這些請求中的每一個都應該在完成時繼續遞歸發送,通過傳入的索引來確定瞭urls裡面具體是那個URL,保證最後輸出的順序不會亂,而是依次輸出。
代碼:
function multiRequest(urls, maxNum) { const len = urls.length; // 請求總數量 const res = new Array(len).fill(0); // 請求結果數組 let sendCount = 0; // 已發送的請求數量 let finishCount = 0; // 已完成的請求數量 return new Promise((resolve, reject) => { // 首先發送 maxNum 個請求,註意:請求數可能小於 maxNum,所以也要滿足條件2 // 同步的 創建maxNum個next並行請求 然後才去執行異步的fetch 所以一上來就有5個next並行執行 while (sendCount < maxNum && sendCount < len) { next(); } function next () { let current = sendCount ++; // 當前發送的請求數量,後加一 保存當前請求url的位置 // 遞歸出口 if (finishCount >= len) { // 如果所有請求完成,則解決掉 Promise,終止遞歸 resolve(res); return; } const url = urls[current]; fetch(url).then(result => { finishCount ++; res[current] = result; if (current < len) { // 如果請求沒有發送完,繼續發送請求 next(); } }, err => { finishCount ++; res[current] = err; if (current < len) { // 如果請求沒有發送完,繼續發送請求 next(); } }); } }); }
總結:
代碼在while循環處創建瞭maxNum個”請求窗口”來進行請求,從而達到並行效果,然後next函數中進行異步請求,然後通過在.then裡面進行遞歸進行新請求的調用,實現”一個窗口隻進行一個請求,當這個請求執行完成後才進行下一個請求”(每個窗口串行執行,maxNum個窗口並行執行)。
到此這篇關於JavaScript如何利用Promise控制並發請求個數的文章就介紹到這瞭,更多相關js用Promise控制並發請求內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
參考鏈接
1、https://www.jb51.net/article/211898.htm
2、https://www.jb51.net/article/212277.htm
推薦閱讀:
- 徹底搞懂 javascript的Promise
- 字節飛書面試promise.all實現示例
- 前端JavaScript之Promise
- Promise靜態四兄弟實現示例詳解
- 淺析Promise的介紹及基本用法