一、場景

假設現在www.cppcns.com有這麼一種場景：現有 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 ()rjlpjjehq {
         let current = sendCount ++; // 當前傳送的請求數量，後加一 儲存當前請求url的位置
         // 遞迴出口
       rjlpjjehq  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