前端并发请求数量控制_前端并发请求个数控制

在前端会遇到需求：例如，有100个接口需要请求，但是同时发送会导致崩溃，所以需要控制同一时刻下的请求数量在3个值。

并发请求的数量控制——js实现

const limitRequest = (urls, maxNum) => {
  return new Promise((resolve) => {
    if (urls.length === 0) {
      resolve([]);
      return
    }
	
	// 定义数组记录每次请求的结果（无论成功失败）
    const results = []
    let index = 0;
    let cnt = 0;

    // 发送请求
    async function request() {
      if (index === urls.length) return;
      const i = index;
      const url = urls[i];
      index++;
      console.log(url);
      try {
        const response = await fetch(url);
        results[i] = response;
      } catch (err) {
        results[i] = err;
      } finally {
        cnt++;
        // 判断是否请求都完成
        if (cnt === urls.length) {
          console.log('所有请求已完成')
          resolve(results)
        }
        request()
      }
    }

    // maxNum和urls.length取最小进行调用
    // 将异步的并发数控制在，同一时间请求times次
    const times = Math.min(maxNum, urls.length);
    for (let i = 0; i < times; i++) {
      request()
    }
  })
}

// 测试数据
const urls = [];
for (let i = 1; i <= 100; i++) {
  urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`)
}
limitRequest(urls, 3).then(res => {
  console.log(res)
})
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

完成效果：同一时刻是3个请求在并发。