前端js限制请求数，处理数据高并发问题_前端如何对请求计数并发加锁

作者：盐析白兔 | 2024-03-28 17:22:51

踩

前端如何对请求计数并发加锁

高并发处理函数

1.html部分，创建index.html文件并粘贴进去

注：模拟请求的是百度的地址，返回数据是空的，我在此只模拟请求，如用在真实项目中，可将模拟地址改为自己项目地址即可。

// An highlighted block
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高并发模拟处理</title>
</head>

<body>
    <script src="./index.js"></script>
    <script>
        /**
         * 并发思路
         * 1.把10个请求链接放进urls的数组当中
         * 2.将urls数组传入并发处理的函数中，返回处理后的数据数组
         * 
        */
        const urls = [];
        for (let i = 0; i < 10; i++) {
            urls.push(`https://www.baidu.com/`)
        }
        concurRequest(urls, 3).then((resp) => {
            console.log(resp, "当并发数量全部结束时返回的数据数组");
        })
    </script>
</body>

</html>
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

2.js部分，创建index.js，并粘贴示例代码

// An highlighted block
/**
 * @param {string} urls 待请求的url数组
 * @param {number} maxNum 最大并发数
 * @returns {Array} 返回所有请求回来的数据数组
 */
function concurRequest(urls, maxNum) {
  return new Promise((resolve) => {
    // 空请求数处理，当请求数为空时，直接返回空数组
    if (urls.length === 0) {
      resolve([]);
    }

    let index = 0; //请一次请求对应的下标
    let count = 0; //记录请求次数
    const result = [];

    async function request() {
      const i = index; //url地址的索引
      const url = urls[index]; //具体的当前请求地址
      index++; //每次请求都将索引+1，请求urls的第i项的地址
      try {
        //捕获错误
        const resp = await fetch(url, {
          method: "GET",
          mode: "no-cors", //解决跨域
          headers: {
            "Content-Type": "application/json; charset=utf-8",
          },
          // body: JSON.stringify(this.state), // post请求时把你要传的数据放在这里转化成json
        });
        result[i] = resp; //将最新返回的数据放在对应的索引位置
      } catch (error) {
        result[i] = error; //错误也放在数据对应索引的位置
      } finally {
        count++;
        //当地址都请求完成后返回，也就是请求的次数等于请求链接数时，返回请求结果
        if (count === urls.length) {
          resolve(result);
        }
        // 判断urls中数据是否请求完成了，没有请求完成就再次调用
        if (index < urls.length) {
          request();
        }
      }
    }
    //并发请求次数，取输入的并发请求数或者是地址数组的数的最小值
    for (let i = 0; i < Math.min(maxNum, urls.length); i++) {
      request();
    }
  });
}

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

总结

我看到网上有说这和promise.all有啥区别，在这里解释一下，promise.all虽然都是等所有数据都结束以后返回的，但是他是同时发送了所有数据，并没有限制了每次发送请求的次数，这就是他们的区别

点赞关注就是对笔者最大的支持，分享技术，共同成长！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/330180

前端js限制请求数，处理数据高并发问题_前端如何对请求计数 并发 加锁

高并发处理函数

1.html部分，创建index.html文件并粘贴进去

2.js部分，创建index.js，并粘贴示例代码

总结

点赞关注就是对笔者最大的支持，分享技术，共同成长！

前端js限制请求数，处理数据高并发问题_前端如何对请求计数并发加锁