js 实现并发请求

297 阅读1分钟

js 实现并发请求*

在现代 Web 开发中,高效处理多个异步请求是一个常见需求。并发请求允许同时处理多个请求,可以显著提高 Web 应用程序的性能,也是高频面试之一,一下代码当前一个请求完成时,再发送下一个请求(以下代码未用队列实现)

 q306671879 群里面有免费资料纯免费,大家一起学习,如果自己有什么好的学习资料也可以一起分享,一个人的力量终究有限,共同进步。
// test.js
function concurRequest(urls, maxNum) {
  return new Promise((resolve, reject) => {
    if (urls.length === 0) {
      resolve([]);
      return;
    }
    const result = []; // 用来返回的数组
    let index = 0; // 下一个请求的下标
    let count = 0;
    // 发送请求
    async function request() {
      if (index === urls.length) {
        return;
      }
      const i = index;
      const url = urls[index];
      index++;
      // console.log(url);
      // 不管成功失败都要push 到数组里面去
      try {
        const resp = await fetch(url);
        result[i] = resp;
      } catch (err) {
        result[i] = err;
      } finally {
        // finally 不管请求成功或者失败都会进入这个里面
        count++;
        if (count === urls.length) {
          // console.log('over');
          resolve(result);
          // return;
        }
        // request();
      }
    }
    const time = Math.min(maxNum, urls.length);
    for (let i = 0; i < time; i++) {
      request();
    }
  });
}

这里是html部分

<!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>Document </title>
</head>

<body>
    <div id="app"></div>
    <script src="./test.js"></script>
    <script>
            const urls = []
            for (let i = 0; i < 100; i++) {
            urls.push(`https://xxxx.com/todps/${i}`);
            }
            // 每次处理三个
            concurRequest(urls, 3).then(resps => {
            console.log('resps', resps);
            })
    </script>
</body>

</html>