前端实现并发请求

阿良_C

已于 2023-08-23 12:44:41 修改

阅读量363

点赞数

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

于 2023-08-23 12:42:53 首次发布

本文链接：https://blog.csdn.net/weixin_44941576/article/details/132449782

版权

前端实现并发请求

封装一个函数,用于实现并发请求

<body>
  <script src="index.js"></script>
  <script>
    const urls = []
    // 生成一百个请求
    for (let i = 1; i <= 100; i++) {
      urls.push(`http://localhost:3000/${i}`)
    }
    // 调用并发请求函数
    concurRequest(urls, 5).then(res => {
      console.log(res)
    })
  </script>
</body>

/*
前端实现并发请求
@params urls: 待请求的url数组
@params maxNum: 最大并发数
*/
function concurRequest(urls, maxNum) {
  return new Promise((resolve) => {
    //当请求的url数组为空时，直接返回空数组
    if (urls.length === 0) {
      resolve([]);
      return;
    }
    //存储请求结果的数组
    const results = [];
    //当前请求的url数组的下标
    let index = 0;
    //当前请求的完成数量
    let count = 0;
    //接下来就是发送请求
    async function request() {
      if (index === urls.length) {
        return;
      }
      //保存当前请求的下标
      const i = index;
      const url = urls[index];
      index++;
      try {
        const res = await fetch(url);
        results[i] = res;
      } catch (err) {
        results[i] = err;
      } finally {
        count++;
        //当请求的url数组遍历完毕时，返回结果
        if (count === urls.length) {
          console.log('调用结束了');
          resolve(results);
        }
        request();
      }
    }

    //发送maxNum个请求
    //当请求的url数组长度小于maxNum时，取两者的最小值
    let minNum = Math.min(maxNum, urls.length);
    for (let i = 0; i < minNum; i++) {
      request();
    }
  });
}