前端常见手写题

1、前端如何实现请求并发控制
20个请求需要发送，由于某些原因，需要我们将同一时刻的并发请求数量控制在3个以内，并且需要尽快拿到响应结果

/**
 * 前端如何实现请求并发控制
 *
 * 实现一个并发请求函数concurrencyRequest(urls, maxNum)，要求如下：
 * • 要求最大并发数 maxNum
 * • 每当有一个请求返回，就留下一个空位，可以增加新的请求
 * • 所有请求完成后，结果按照 urls 里面的顺序依次打出（发送请求的函数可以直接使用fetch即可）
 */

const concurrencyRequest = (urls: string[], maxNum: number) => {
  return new Promise((resolve) => {
    const results: Response[] = [],
      _maxReqNum = urls.length;
    let _records = maxNum;

    const request = (idx) => {
      console.log('%c [ idx ]-19', 'font-size:13px; background:pink; color:#bf2c9f;', idx);
      fetch(urls[idx])
        .then((_res) => {
          results[idx] = _res;
          _records++;
          if (_records === _maxReqNum) {
            console.log("请求完成");
            return resolve(results);
          }
          if (_records < _maxReqNum) {
            request(_records);
          }
        })
        .catch((_err) => {
          results[idx] = _err;
        });
    };

    for (let i = 0; i < _records; i++) {
      request(i);
    }
  });
};

const urls: string[] = [];
for (let i = 0; i < 20; i++) {
  urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
}
concurrencyRequest(urls, 3).then((res) => {
  console.log(res);
});