JS实现并发请求功能

@前端小菜

于 2024-07-21 16:06:47 发布

阅读量414

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48771508/article/details/140589461

版权

前端并发请求常见的适用场景包括以下几种：

1. 加载多个相互独立的资源
例如同时加载不同的图片、样式表和脚本文件。假设一个网页需要加载一张主页图片、一个导航栏的样式表和一个用于交互的脚本，为了提高页面加载速度，可以同时发起这三个请求。

2. 分页数据获取
当用户浏览分页数据时，如商品列表的不同页面，前端可以同时发送多个请求获取不同页的数据，使用户在切换页面时能够快速响应，无需等待逐个请求的完成。

3. 实时数据更新
在金融交易或股票行情等应用中，需要同时获取多个实时数据来源，以确保数据的及时性和准确性。

4. 多模块初始化
一个复杂的应用可能由多个功能模块组成，在应用初始化时，可以并发请求各个模块所需的初始数据，从而加快应用的启动速度。

5. 搜索建议
当用户在输入搜索关键词时，前端可以同时向服务器发送多个请求，获取相关的搜索建议，以便快速提供给用户，改善用户体验。

6. 地图应用
在地图应用中，可能需要同时获取地图数据、地点信息、交通状况等多种数据，以快速呈现完整且准确的地图界面。

7. 文件分片上传

例如，在一个电商网站中，用户进入商品详情页时，前端可以并发请求商品的详细信息、用户评价、相关推荐商品等数据，这样能够在最短的时间内为用户呈现一个丰富完整的页面，提高用户的购物体验。

又如，在一个在线游戏的前端界面，可能需要同时请求玩家信息、游戏排行榜、最新活动等数据，以便玩家能够快速获取到全面的游戏资讯。
使用示例：

<!DOCTYPE html>
<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, 4).then((result) => {
      console.log(result, '结果')
    })
  </script>
</body>
</html>

实现代码：

/**
 * 并发请求
 * @param {string[]} urls 待请求的 url 数组
 * @param {number} maxNum 最大并发数
 */
export function concurRequest(urls, maxNum = 10) {
  if(!urls || !urls.length) return Promise.resolve([])
  return new Promise((resolve) => {
    let index = 0  // 请求指针
    const result = []  // 存储请求结果
    let count = 0  // 请求完成数
    async function _request() {
      const i = index
      const url = urls[index]
      index++
      try {
        const resp = await fetch(url)
        result[i] = resp
      } catch (error) {
        result[i] = error
      } 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()
    }

  })
}

@前端小菜

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现并发请求功能

例如，在一个电商网站中，用户进入商品详情页时，前端可以并发请求商品的详细信息、用户评价、相关推荐商品等数据，这样能够在最短的时间内为用户呈现一个丰富完整的页面，提高用户的购物体验。例如同时加载不同的图片、样式表和脚本文件。当用户浏览分页数据时，如商品列表的不同页面，前端可以同时发送多个请求获取不同页的数据，使用户在切换页面时能够快速响应，无需等待逐个请求的完成。又如，在一个在线游戏的前端界面，可能需要同时请求玩家信息、游戏排行榜、最新活动等数据，以便玩家能够快速获取到全面的游戏资讯。
复制链接

扫一扫