字節(jié)跳動面試之如何用JS實現Ajax并發(fā)請求控制

更新時間：2021年05月11日 10:50:44 作者：前端森林

這篇文章主要給大家介紹了關于字節(jié)跳動面試之如何用JS實現Ajax并發(fā)請求控制的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

講真的，最近也很迷茫。關于技術、關于生活吧。也找了很多在大廠的朋友去聊，想需求一些后期發(fā)展的思路。這其中也聊到了面試，聊到了招聘中會給面試者出的一些題目。我正好也好久沒面試了，就從中選了幾道。最近也會陸續(xù)出一系列關于一些面試問題的解析。

今天這道是字節(jié)跳動的：

實現一個批量請求函數 multiRequest(urls, maxNum)，要求如下：

• 要求最大并發(fā)數 maxNum

• 每當有一個請求返回，就留下一個空位，可以增加新的請求

• 所有請求完成后，結果按照 urls 里面的順序依次打出

這道題目我想很多同學應該都或多或少的見過，下面我會依次從出現的場景、問題的分析到最終的實現，一步步力求深入淺出的給出這道題目的完整解析。

場景

假設現在有這么一種場景：現有 30 個異步請求需要發(fā)送，但由于某些原因，我們必須將同一時刻并發(fā)請求數量控制在 5 個以內，同時還要盡可能快速的拿到響應結果。

應該怎么做？

首先我們來了解一下 Ajax的串行和并行。

基于 Promise.all 實現 Ajax 的串行和并行

我們平時都是基于promise來封裝異步請求的，這里也主要是針對異步請求來展開。

串行：一個異步請求完了之后在進行下一個請求
并行：多個異步請求同時進行

通過定義一些promise實例來具體演示串行/并行。

串行

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");
});

Promise.all 并發(fā)限制

這時候考慮一個場景：如果你的promises數組中每個對象都是http請求，而這樣的對象有幾十萬個。

那么會出現的情況是，你在瞬間發(fā)出幾十萬個http請求，這樣很有可能導致堆積了無數調用棧導致內存溢出。

這時候，我們就需要考慮對Promise.all做并發(fā)限制。

Promise.all并發(fā)限制指的是，每個時刻并發(fā)執(zhí)行的promise數量是固定的，最終的執(zhí)行結果還是保持與原來的Promise.all一致。

題目實現

思路分析

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

代碼實現

function multiRequest(urls = [], maxNum) {
  // 請求總數量
  const len = urls.length;
  // 根據請求數量創(chuàng)建一個數組來保存請求的結果
  const result = new Array(len).fill(false);
  // 當前完成的數量
  let count = 0;

  return new Promise((resolve, reject) => {
    // 請求maxNum個
    while (count < maxNum) {
      next();
    }
    function next() {
      let current = count++;
      // 處理邊界條件
      if (current >= len) {
        // 請求全部完成就將promise置為成功狀態(tài), 然后將result作為promise值返回
        !result.includes(false) && resolve(result);
        return;
      }
      const url = urls[current];
      console.log(`開始 ${current}`, new Date().toLocaleString());
      fetch(url)
        .then((res) => {
          // 保存請求結果
          result[current] = res;
          console.log(`完成 ${current}`, new Date().toLocaleString());
          // 請求沒有全部完成, 就遞歸
          if (current < len) {
            next();
          }
        })
        .catch((err) => {
          console.log(`結束 ${current}`, new Date().toLocaleString());
          result[current] = err;
          // 請求沒有全部完成, 就遞歸
          if (current < len) {
            next();
          }
        });
    }
  });
}