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

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

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

前言

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

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

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

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

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

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

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

場景

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

應(yīng)該怎么做？

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

基于 Promise.all 實現(xiàn) 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í)行對應(yīng)接口請求。

并行

通常，我們在需要保證代碼在多個異步處理之后執(zhí)行，會用到：

Promise.all((promises: [])).then((fun: function));
Promise.all可以保證，promises數(shù)組中所有promise對象都達(dá)到resolve狀態(tài)，才執(zhí)行then回調(diào)。

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數(shù)組中每個對象都是http請求，而這樣的對象有幾十萬個。

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

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

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

題目實現(xiàn)

思路分析

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

代碼實現(xiàn)

function multiRequest(urls = [], maxNum) {
  // 請求總數(shù)量
  const len = urls.length;
  // 根據(jù)請求數(shù)量創(chuàng)建一個數(shù)組來保存請求的結(jié)果
  const result = new Array(len).fill(false);
  // 當(dāng)前完成的數(shù)量
  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) => {
          // 保存請求結(jié)果
          result[current] = res;
          console.log(`完成 ${current}`, new Date().toLocaleString());
          // 請求沒有全部完成, 就遞歸
          if (current < len) {
            next();
          }
        })
        .catch((err) => {
          console.log(`結(jié)束 ${current}`, new Date().toLocaleString());
          result[current] = err;
          // 請求沒有全部完成, 就遞歸
          if (current < len) {
            next();
          }
        });
    }
  });
}

總結(jié)

到此這篇關(guān)于字節(jié)跳動面試之如何用JS實現(xiàn)Ajax并發(fā)請求控制的文章就介紹到這了,更多相關(guān)JS實現(xiàn)Ajax并發(fā)請求控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: