對於瀏覽器請求介面限制，是否有必要開發一套請求工作管理員元件，自主的去控制請求的併發，保證在瀏覽器允許的最大併發連線數限制之中，避免請求阻塞和資源搶佔。

龙陌發表於2024-07-04
瀏覽器元件

在現代Web開發中，瀏覽器對同時發起的網路請求確實存在一定的限制，這個限制通常與瀏覽器的安全性和效能最佳化有關。不同瀏覽器對最大併發連線數有不同的預設設定，例如，Chrome 和 Firefox 大致允許每個域名上同時有6到8個TCP連線，而IE可能更低。當超過這個限制時，額外的請求會被排隊等待，直到有連線釋放。

開發一個請求工作管理員元件來控制併發請求，可以帶來以下幾個優勢：

  1. 避免請求阻塞：透過控制併發數，可以確保不會超出瀏覽器的限制，從而避免請求被不必要的延遲。

  2. 資源最佳化：合理分配請求，避免短時間內大量請求造成的伺服器壓力，以及前端資源的浪費。

  3. 錯誤處理和重試機制：可以整合更精細的錯誤處理邏輯和重試策略，比如在網路不穩定時自動重發失敗的請求。

  4. 優先順序管理：可以根據請求的重要性和緊急程度，調整請求的優先順序，確保關鍵資料能更快獲取。

  5. 流量控制：在高流量場景下，可以平滑地分配請求，防止瞬時高峰導致的系統崩潰。

  6. 日誌和監控：可以記錄請求的狀態和效能指標，便於後續分析和最佳化。

然而，在決定是否開發這樣一個元件時，也需要考慮一些因素：

  • 現有庫和框架：許多流行的庫和框架，如Axios、Fetch API、甚至React Query等，已經內建了併發控制和重試機制，使用這些成熟的解決方案可能比從頭開始構建更高效、更穩定。

  • 維護成本：自定義實現需要持續的維護和最佳化，這可能會增加專案的複雜度和維護成本。

  • 團隊技能和時間：如果團隊對這一領域不熟悉或者專案時間緊張，可能不是最經濟的選擇。

  • 效能影響：雖然請求管理可以最佳化效能，但不恰當的實現也可能引入額外的開銷，需要權衡利弊。

綜上所述，是否開發請求工作管理員元件，應當基於專案需求、現有技術棧、團隊能力和預期效果綜合考量。
如果專案規模較大，涉及複雜的網路通訊，或者有特定的效能要求，那麼開發一個定製化的請求管理器可能是值得的；否則，評估和採用現有的成熟解決方案可能更為明智。

在使用 Axios 進行 HTTP 請求時，控制併發可以透過多種方式實現。這裡介紹兩種常見的方法：使用 Promise.all() 或者使用第三方庫如 p-limit 或 axios-retry。

方法一：使用 Promise.all() 和 Promise.allSettled()

Promise.all() 可以接收一個 Promise 陣列作為引數，當所有 Promise 都完成（resolve 或 reject）時返回一個包含結果的陣列。但是，Promise.all() 本身並不控制併發數量，所以需要結合 Promise.allSettled() 和佇列思想來控制併發。

示例程式碼如下：

const axios = require('axios');
const queue = [];

// 假設我們有大量請求
const requests = Array.from({ length: 50 }, (_, i) => axios.get(`https://jsonplaceholder.typicode.com/posts/${i}`));

// 控制併發數為5
const maxConcurrentRequests = 5;

let activeRequests = 0;

requests.forEach(request => {
  queue.push(
    new Promise(resolve => {
      if (activeRequests < maxConcurrentRequests) {
        activeRequests++;
        request.then(() => {
          activeRequests--;
          resolve();
        }).catch(() => {
          activeRequests--;
          resolve();
        });
      } else {
        resolve();
      }
    })
  );
});

Promise.allSettled(queue)
  .then(results => {
    console.log('所有請求已完成');
  });

方法二：使用 p-limit

p-limit 是一個輕量級的 npm 包，可以幫助你控制非同步函式的併發數。使用 p-limit 的方法如下：

首先，安裝 p-limit：

npm install p-limit

然後，你可以像下面這樣使用 p-limit：

const axios = require('axios');
const pLimit = require('p-limit');

// 假設我們有大量請求
const requests = Array.from({ length: 50 }, (_, i) => axios.get(`https://jsonplaceholder.typicode.com/posts/${i}`));

const limit = pLimit(5); // 控制併發數為5

const executeRequestsWithLimit = async () => {
  await Promise.all(requests.map(limit));
  console.log('所有請求已完成');
};

executeRequestsWithLimit();

方法三：使用 axios-retry

axios-retry 是一個用於自動重試 Axios 請求的外掛，雖然主要用於重試，但也可以透過調整重試策略來間接控制併發數。
然而，這並不是直接控制併發的最佳實踐，因為它的主要設計目的是為了處理重試邏輯。

總之，p-limit 是控制 Axios 請求併發數的一個簡單而有效的方法，而 Promise.all() 和 Promise.allSettled() 配合佇列思想可以不依賴額外庫實現控制併發。
選擇哪種方法取決於你的具體需求和專案環境。

相關文章