7

问题

现有 40 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 6 个以内,同时还要尽可能快速的拿到响应结果。应该怎么做?

这个问题与一道经典面试题很类似:

实现一个批量请求函数 multiRequest(urls, maxNum),要求如下:
• 要求最大并发数 maxNum
• 每当有一个请求返回,就留下一个空位,可以增加新的请求
• 所有请求完成后,结果按照 urls 里面的顺序依次打出

实现

Promise 串行与并行

  • 串行:一个异步请求完了之后在进行下一个请求;
  • 并行:多个异步请求同时进行;

串行

串行是一个 http 请求成功后再次发起下一个 http 请求;

优点

  • http 请求是有序的;
  • 后一个 http 请求可以拿到前一个请求的返回值;

缺点:

  • 没有利用浏览器同域名请求的最大并发数,同时只会存在一个 http 请求,很大程度上延长了响应时间。
const p = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("1000");
      resolve();
    }, 1000);
  });
};
const p1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("2000");
      resolve();
    }, 2000);
  });
};
const p2 = function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("3000");
      resolve();
    }, 3000);
  });
};

p().then(() => {
    return p1();
  }).then(() => {
    return p2();
  }).then(() => {
    console.log("end");
  });

并行

参数数组中所有 promise 都达到resolve状态,才执行then回调。

缺点:

  • 如果 http 请求达到几万条,promise.all 在瞬间发出几万条 http 请求,这样很有可能导致堆积了无数调用栈导致内存溢出。
  • 任意一个 promise 是 reject,就不会进入 then;
const promises = () => {
  return [1000, 2000, 3000].map((current) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(current);
        resolve();
      }, current);
    });
  });
};

Promise.all(promises()).then(() => {
  console.log("end");
});

Promise.all 并发限制

Promise.all 并发限制指的是:每个时刻并发执行的promise数量是固定的,最终的执行结果还是保持与原来的Promise.all一致。

栗子: 请求接口相同,参数不同的请求并发限制

添加最大并发数 maxRequestNum,所有请求完成后再返回。

优点:

  • 利用浏览器同域名请求的最大并发数,快速拿到所有返回值,减少响应时间,不会造成堆栈溢出。

缺点:

  • 所有请求全部结束才会返回,白屏时间久,用户体验不好。
const multiRequest = (fetch, params = [], maxRequestNum = 6) => {
  const paramsLength = params.length;
  let result = new Array(paramsLength).fill(false);
  let sendCount = 0;
  let finishCount = 0;

  return new Promise((resolve) => {
    while (sendCount < maxRequestNum && sendCount < paramsLength) {
      next();
    }

    function handleResult(current, res) {
      finishCount ++;
      result[current] = res;
      if (sendCount < paramsLength) {
        next();
      }
      if (finishCount >= paramsLength) {
        resolve(result);
      }
    }

    function next() {
      let current = sendCount++;
      const param = params[current];
      fetch(param).then((res) => {
        handleResult(current, res)
      }).catch((err) => {
        handleResult(current, err)
      });
    }
  });
}

时倾
791 声望2.4k 粉丝

把梦想放在心中


« 上一篇
CSS - background