前端js限制请求数，处理数据高并发问题

最新推荐文章于 2024-07-08 11:20:30 发布

Wh K、

最新推荐文章于 2024-07-08 11:20:30 发布

阅读量296

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/iamkangdi/article/details/133623522

版权

高并发处理函数

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>

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();
    }
  });
}