假設現在有這么一種場景：現有 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控制并發請求內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！

參考鏈接

1、https://www.jb51.net/article/211898.htm

2、https://www.jb51.net/article/212277.htm