前端并发请求常见的适用场景包括以下几种:
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()
}
})
}