JS-并发请求

111 阅读1分钟

常见面试题-控制最大并发请求数量

需要考虑的点

1:请求顺序和请求结果要一一对应

2:控制最大并发请求数量

3:结束条件

function concurRequest(urls, maxNum) {
  if (urls.length == 0) return Promise(resolve([]));
  return new Promise(resolve => {

    var index = 0;
    var result = [];
    var count = 0;

    async function request_() {
      let url = urls[index];
      const i = index;
      index++;
      try {
        let resp = await fetch(url);
        result[i] = resp;
      } catch (err) {
        result[i] = err;
      } finally {
        count++;
        if (count == urls.length) {
          resolve(result);
        }
        if (index < urls.length) {
          request_();
        }
      }
    }
    for (let i = 0; i < Math.min(urls.length, maxNum); i++) {
      request_();
    }
  })
}

通过临时变量i来记录请求的位置,count计数判断什么适合完成所有请求,最后for循环需要考虑数组长度小于最大并发数量的情况

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./index.js"></script>
  <script>
    const urls = [];
    for(let i=1;i<=10;i++){
      urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`)
    }
    concurRequest(urls,3).then((res) => {
      console.log(res)
    })
  </script>
</body>
</html>

最后写段代码尝试一下

前端小菜鸡初次尝试写文,欢迎留言讨论