弹幕
接口请求串行执行
要点：
- 使用async await来实现
- 遍历请求不能使用forEach，不然会有问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>接口串行请求</title>
</head>
<body>
<script>
let requestArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 模拟接口请求
async function fetchDataApi(params) {
let res = await new Promise((resolve) => {
setTimeout(() => {
resolve(requestArr[params + 1])
}, 1000)
})
return res
}
async function serialRequest() {
console.log('串行请求开始')
// 使用forEach遍历会有问题,因为forEach不接受异步请求,所以需要使用for循环
// requestArr.forEach(async (item) => {
// await fetchDataApi(item)
// })
// 初始请求参数
let params = requestArr[0]
for (let i = 0; i < requestArr.length; i++) {
// 获取请求结果
let res = await fetchDataApi(params)
console.log('res---', res)
// 将请求结果作为下一次请求的参数
params = res
}
}
serialRequest()
</script>
</body>
</html>
当QFS达到峰值时该如何处理
当QFS（每秒查询率）达到峰值时，前端的处理通常集中再优化用户体验和减轻后端服务器的压力。以下是几种常见的处理办法：
1.前端缓存
- 利用浏览器缓存(localStorage和sessionStorage)，减少不必要的HTTP请求
2.异步请求与队列管理
- 使用异步请求避免阻塞UI线程
- 实现请求队列机制，当请求频率过高时，将请求排队而不是立即发送，避免短时间内大量请求冲击服务器
3.限流与重试机制：
- 在前端实现限流逻辑，控制单位时间内发送的请求次数，防止过度请求
4.用户界面反馈
- 提供加载指示器，告知用户操作正在进行中
5.请求优化
- 减少HTTP请求大小，例如通过压缩资源和使用更小的图片格式
- 使用CDN来缓存静态资源，减少对主服务器的直接请求
6.按需加载
- 实施懒加载技术，只在需要时加载数据或资源，减少不必要的加载
7.前端预处理
- 在发送到服务器之前，前端可以做一些数据预处理，减少服务器的工作负载
8.使用webScoket或其他长连接技术
- 长连接可以减少建立新连接的开销，前端可以做一些数据预处理，减少服务器的工作负载。
9.多终端适配
- 根据设备类型调整请求策略，例如移动设备可能有更加严格的网络和性能限制
