前端面试题：实现批量请求数据，并控制请求并发数量，最后所有请求结束之后，执行callback回调函数_前端并发限制和缓存+批量发送实现方案

const allRequest = [
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=1",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=2",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=3",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=4",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=5",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=6",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=7",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=8",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=9",
  "https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?index=10",
];

function sendRequest(urls, max, callbackFunc) {
  const REQUEST_MAX = max;
  const TOTAL_REQUESTS_NUM = urls.length;
  const blockQueue = []; // 等待排队的那个队列
  let currentReqNumber = 0; // 现在请求的数量是
  let numberOfRequestsDone = 0; // 已经请求完毕的数量是
  const results = new Array(TOTAL_REQUESTS_NUM).fill(false); // 所有请求的返回结果，先初始化上

  async function init() {
    for (let i = 0; i < urls.length; i++) {
      request(i, urls[i]);
    }
  }

  async function request(index, reqUrl) {
    // 这个index传过来就是为了对应好哪个请求，
    // 放在对应的results数组对应位置上的，保持顺序
    if (currentReqNumber >= REQUEST_MAX) {
      await new Promise((resolve) => blockQueue.push(resolve)); // 阻塞队列增加一个 Pending 状态的 Promise，
      // 进里面排队去吧，不放你出来，不resolve你，你就别想进行下面的请求
    }
    reqHandler(index, reqUrl); // {4}
  }

  async function reqHandler(index, reqUrl) {
    currentReqNumber++; // {5}
    try {
      const result = await fetch(reqUrl);
      results[index] = result;
    } catch (err) {
      results[index] = err;
    } finally {
      currentReqNumber--;
      numberOfRequestsDone++;
      if (blockQueue.length) {
        // 每完成一个就从阻塞队列里剔除一个
        blockQueue[0](); // 将最先进入阻塞队列的 Promise 从 Pending 变为 Fulfilled，
        // 也就是执行resolve函数了，后面不就能继续进行了嘛
        blockQueue.shift();
      }
      if (numberOfRequestsDone === TOTAL_REQUESTS_NUM) {
        callbackFunc(results);
      }
    }
  }

  init();
}

sendRequest(allRequests, 2, (result) => console.log(result));


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65