处理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, i });
        });

        fetchPromises.push(fetchPromise);
      }

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

}

 

 

需要考虑的问题: 
如果不是SPA, 那么切换到其他页面的时候会丢失网络请求, 需要提示用户操作会被终止

可以通过点击跳转按钮时提示

或者是监听beforeunload事件

顺序是对的吗? 不能稳定, 会根据网络状态来定, 所以需要改进
- 问题出在不能在 fetchPromise的时候就await, 这样子就直接请求接口了 导致顺序有问题, 应该要放到Promise.all中, 才能按顺序获得结果
但是我们这里有点特殊, 我们用了throat库, 它里面必须是`throat(async () => await fetch());`, 所以, 我们可以换中思路, 在每个result添加到结果数组中的时候,  不要直接push, 而是应该根据index来赋值, 以下是完整代码

throat库可以直接throat(()  => fetch) 之前测试thorat没生效是因为fetch写法错误, 为了测试顺序, 我直接return {data: await fetch, index} 导致throat生效

const func = async () => {
  const results = [];  const requestTimes = 6;

  const fetchPromises = new Array(requestTimes).fill(1).map((_, i) =>
       throat(() => fetch({
          // ...
        });
      );
  );

  await Promise.all(fetchPromises).then(results => {

    results.forEach((item) => {
       // ...
     }); 
   })
 };