處理API請求並行問題

背景: 我們有一個導出全部數據的功能, 因爲各種原因, 可能需要同時發送10幾條請求來獲取數據

遇到的問題: 因爲瀏覽器http/1.1最多同時進行6個請求, 所以會阻塞用戶的其他操作

打個比喻:

之前我們是一個賽道, 可以上6個任意國家的運動員, 第七個人想上去就得排隊

現在改爲了兩個賽道:

• 賽道一可以同時上場4個任意國家的運動員, 但是優先加拿大的運動員
• 賽道二可以同時上場2個除了加拿大以外的運動員

這樣就完美解決了請求並行的問題

import Throat from 'throat';

// 一次只會請求4個
const throat = Throat(4);

const functionA = () => {      
     const fetchPromises = [];
     const results = [];
      
      for (let i = 0; i < n; i++) {
        const fetchPromise = throat(async () => {
          const result = await fetch(//...);

          results.push(result);
        });

        fetchPromises.push(fetchPromise);
      }


   await Promise.allSettled(fetchPromises);
  
   results.forEach((item) => {
     // ...
   });

}

 

 

需要考慮的問題: 
如果不是SPA, 那麼切換到其他頁面的時候會丟失網絡請求, 需要提示用戶操作會被終止

可以通過點擊跳轉按鈕時提示

或者是監聽beforeunload事件