面试题：使用promise实现并发请求限制（最优解）

问题：有 8 个图片资源的 url，已经存储在数组 urls 中，而且已经有一个函数 function loadImg，输入一个 url 链接，返回一个 Promise，该 Promise 在图片下载完成的时候 resolve，下载失败则 reject。但是我们要求，任意时刻，同时下载的链接数量不可以超过 3 个。
请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。

之前看过很多答案都不够好，索性自己动手实现了一下，算是最优解了。

下图这样的排队和并发请求的场景基本类似，窗口只有三个，人超过三个之后，后面的人只能排队了。

var urls = [
  "https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg",
  "https://www.kkkk1000.com/images/getImgData/gray.gif",
  "https://www.kkkk1000.com/images/getImgData/Particle.gif",
  "https://www.kkkk1000.com/images/getImgData/arithmetic.png",
  "https://www.kkkk1000.com/images/getImgData/arithmetic2.gif",
  "https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg",
  "https://www.kkkk1000.com/images/getImgData/arithmetic.gif",
  "https://www.kkkk1000.com/images/wxQrCode2.png",
];

function loadImg(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function () {
      resolve(url);
    };
    img.onerror = reject;
    img.src = url;
  });
}

async function limitLoad(urls, handler, limit) {
  const promises = [];
  const queue = urls.splice(0, limit).map((url, index) => {
    const _p = handler(url);
    promises.push(_p);
    return _p.then((res) => {
      return [index, res];
    });
  });
  for (const item of urls) {
    const [index] = await Promise.race(queue);
    const _p = handler(item);
    promises.push(_p);
    queue[index] = _p.then((res) => {
      return [index, res];
    });
  }

  return Promise.allSettled(promises);
}

limitLoad(urls, loadImg, 3).then((res) => console.log(res));

代码执行结果：

解析：

该题主要考察对Promise的使用，重点需要理解Promise.race()和Promise.allSettled()的用法。

三连：点赞+关注+转发