JavaScript如何利用Promise控制并發(fā)請求個數(shù)

更新時間：2021年05月14日 11:49:43 作者：二九君

大家都知道js是單線程，并不存在真正的并發(fā)，但是由于JavaScript的Event Loop機制，使得異步函數(shù)調用有了“并發(fā)”這樣的假象。這篇文章主要給大家介紹了關于JavaScript如何利用Promise控制并發(fā)請求個數(shù)的相關資料,需要的朋友可以參考下

一、場景

假設現(xiàn)在有這么一種場景：現(xiàn)有 30 個異步請求需要發(fā)送，但由于某些原因，我們必須將同一時刻并發(fā)請求數(shù)量控制在 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數(shù)組中所有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數(shù)組中每個對象都是http請求，而這樣的對象有幾十萬個。
那么會出現(xiàn)的情況是，你在瞬間發(fā)出幾十萬個http請求，這樣很有可能導致堆積了無數(shù)調用棧導致內存溢出。
這時候，我們就需要考慮對Promise.all做并發(fā)限制。
Promise.all并發(fā)限制指的是，每個時刻并發(fā)執(zhí)行的promise數(shù)量是固定的，最終的執(zhí)行結果還是保持與原來的Promise.all一致。

三、代碼實現(xiàn)

整體采用遞歸調用來實現(xiàn)：最初發(fā)送的請求數(shù)量上限為允許的最大值，并且這些請求中的每一個都應該在完成時繼續(xù)遞歸發(fā)送，通過傳入的索引來確定了urls里面具體是那個URL，保證最后輸出的順序不會亂，而是依次輸出。

代碼：

function multiRequest(urls, maxNum) {
 const len = urls.length; // 請求總數(shù)量
 const res = new Array(len).fill(0); // 請求結果數(shù)組
 let sendCount = 0; // 已發(fā)送的請求數(shù)量
 let finishCount = 0; // 已完成的請求數(shù)量
 return new Promise((resolve, reject) => {
     // 首先發(fā)送 maxNum 個請求，注意：請求數(shù)可能小于 maxNum，所以也要滿足條件2
     // 同步的 創(chuàng)建maxNum個next并行請求 然后才去執(zhí)行異步的fetch 所以一上來就有5個next并行執(zhí)行
     while (sendCount < maxNum && sendCount < len) { 
         next();
     }
     function next () {
         let current = sendCount ++; // 當前發(fā)送的請求數(shù)量，后加一 保存當前請求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函數(shù)中進行異步請求，然后通過在.then里面進行遞歸進行新請求的調用，實現(xiàn)"一個窗口只進行一個請求，當這個請求執(zhí)行完成后才進行下一個請求"（每個窗口串行執(zhí)行，maxNum個窗口并行執(zhí)行）。

到此這篇關于JavaScript如何利用Promise控制并發(fā)請求個數(shù)的文章就介紹到這了,更多相關js用Promise控制并發(fā)請求內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

參考鏈接

1、http://www.dbjr.com.cn/article/211898.htm

2、http://www.dbjr.com.cn/article/212277.htm

您可能感興趣的文章: