前端 vue单页面中请求数量过多问题 控制单页面请求并发数

server/2024/9/23 14:23:37/

需求背景:

页面中需要展示柜子,一个柜子需要调用 详情接口以及状态接口

也就是说有一个柜子就需要调用两个接口,在项目初期,接手的公司项目大概也就4-5个柜子,最多的也不超过10个,但是突然进来一个项目,这个项目中有 TM 300多台柜子,所以第一次渲染的时候,同时向服务器请求了600多个接口,导致接口超时,服务也挂了,主要也没想到会存在这种情况,咱也没遇到过啊,ok,既然问题来了,咱就解决问题

我一开始的代码逻辑就是先获取机柜数量,然后循环这个数组,在循环体中调用接口,不过我是通过添加到promise数组中,然后统一处理的,上代码

javascript">const getCabinetNum = async (id) => {let cabinetList = await cabinetApi.getCabinetList({projectId: id ? id : projectId.value})const promises = cabinetList?.map(async (cabinet) => {const data = await cabinetApi.getCabinetLive({cabinetId: cabinet.instanceUid,projectId: cabinet.projectId})const status = await cabinetApi.getCabinetStatus({cabinetId: cabinet.instanceUid,projectId: cabinet.projectId})return {...data, ...status}})if (promises && promises.length > 0) {const results = await Promise.all(promises)cabinetData.value = results}}

cabinetData.value 就是我最后渲染柜子的数据

这段代码的问题有两个:
1. 如果cabinetList 的长度过长 比如20个,我就要同时请求40个接口
2. 我在完全获取 cabinetData 之前,柜子是渲染不出来的,因为我封装的柜子组件是需要循环 cabinetData 去渲染的

那么,先来解决第一个问题,如何控制请求并发数量

思路:将 cabinetList 进行分割成组,控制每组的个数,然后通过组的形式向后端发送请求

javascript">const fetchCabinetDetailsInBatches = async (cabinetList, batchSize) => {// 计算需要分成的批次数量const batches = Math.ceil(cabinetList.length / batchSize)// 用于存储所有机柜详情的数组const allCabinetData = []// 循环每个批次for (let i = 0; i < batches; i++) {// 获取当前批次的起始索引和结束索引const startIndex = i * batchSizeconst endIndex = Math.min((i + 1) * batchSize, cabinetList.length)// 获取当前批次的机柜列表const batchCabinets = cabinetList.slice(startIndex, endIndex)// 定义一个数组,用于存储当前批次的所有 getCabinetLive 方法返回的 Promise 对象const promiseList = []// 循环遍历当前批次的机柜列表,为每个机柜调用 getCabinetLive,getCabinetStatus 方法,并将返回的 Promise 对象存储到 promiseList 中batchCabinets.forEach((cabinet) => {promiseList.push(Promise.all([cabinetApi.getCabinetLive({cabinetId: cabinet.instanceUid,projectId: cabinet.projectId}),cabinetApi.getCabinetStatus({cabinetId: cabinet.instanceUid,projectId: cabinet.projectId})]))})// 使用 Promise.all() 并行处理当前批次的所有 Promise 对象const batchResults = await Promise.all(promiseList)// 将当前批次的机柜数据存入 allCabinetData 数组中batchResults.forEach(([cabinetInfoList, status], index) => {allCabinetData[startIndex + index] = {...cabinetInfoList, status}})}return allCabinetData
}

这个函数是用来做分组以及处理数据的

使用如下

javascript">const getCabinetNum = async (id) => {let cabinetList = await cabinetApi.getCabinetList({projectId: id ? id : projectId.value})cabinetData.value = await fetchCabinetDetailsInBatches(cabinetList, 3)
}

其实主要还是利用promise.all 方法,分批处理每组的多个请求

2.下面解决第二个问题,如何能在完全获取到 cabinetData 之前渲染出柜子,并且,伴随着接口的请求,接着渲染呢

上面我提到了我是通过将 cabinetData 传递给子组件的,那么我只需要要监听 cabinetData 的变化,不断更新 cabinetData 不就好了,我首先想到的是 computed

javascript">const renderedCabinets = computed(() => {return cabinetData.value
})

通过不断变化的 cabinetData.value 将 renderedCabinets传递给子组件

但是上面的代码存在的问题就是 cabinetData.value还是需要等待全部获取,所以只要稍作修改即可

javascript">const fetchCabinetDetailsInBatches = async (cabinetList, batchSize) => {// 计算需要分成的批次数量const batches = Math.ceil(cabinetList.length / batchSize)// 用于存储所有机柜详情的数组const allCabinetData = []// 循环每个批次for (let i = 0; i < batches; i++) {// 获取当前批次的起始索引和结束索引const startIndex = i * batchSizeconst endIndex = Math.min((i + 1) * batchSize, cabinetList.length)// 获取当前批次的机柜列表const batchCabinets = cabinetList.slice(startIndex, endIndex)// 定义一个数组,用于存储当前批次的所有 getCabinetLive 方法返回的 Promise 对象const promiseList = []// 循环遍历当前批次的机柜列表,为每个机柜调用 getCabinetLive,getCabinetStatus 方法,并将返回的 Promise 对象存储到 promiseList 中batchCabinets.forEach((cabinet) => {promiseList.push(Promise.all([cabinetApi.getCabinetLive({cabinetId: cabinet.instanceUid,projectId: cabinet.projectId}),cabinetApi.getCabinetStatus({cabinetId: cabinet.instanceUid,projectId: cabinet.projectId})]))})// 使用 Promise.all() 并行处理当前批次的所有 Promise 对象const batchResults = await Promise.all(promiseList)// 将当前批次的机柜数据存入 allCabinetData 数组中batchResults.forEach(([cabinetInfoList, status], index) => {allCabinetData[startIndex + index] = {...cabinetInfoList, status}})//这里!!!!!!!!!!!!!!!!!cabinetData.value = [...allCabinetData]}return allCabinetData
}

我在每次循环之后 将 cabinetData.value 赋值为最新获取的数据,这样每次循环,cabinetData.value就会改变,从而 renderedCabinets 也会改变

ok 这样就大功告成了

这段代码其实还有一个问题就是如果在接口没有请求完之前,你离开了当前页面,会导致在别的页面下,没请求完的接口依然在请求,会导致内存泄漏,就跟组件销毁前没销毁定时器是一个道理

可以利用axios的关闭请求的方法来解决,后续会更新代码

其实这个问题还有一种更简单高效的解决方案,就是懒加载,在用户滑动查看到新的柜子之前,不请求,滑动到未加载的机柜就请求接口,跟图片懒加载一个道理,这个方案更加简单明了,而且性能肯定比目前这个方案好,后续我也会试一下这个方案


http://www.ppmy.cn/server/9356.html

相关文章

20240419金融读报:加大绿色债券支持绿色金融货币政策仍有空间人民银行对金融服务实体理解摘抄

1、国家发文支持通过发行绿色债券、绿色资产支持正确等支持绿色金融。但2023年绿色债券发行规模占比1.17%。&#xff08;是不是可以买一支&#xff0c;乘风起&#xff1f;&#xff09; 2、4月18日&#xff0c;国新办举行新闻发布会&#xff0c;表明货币政策还有空间&#xff0c…

二百三十三、Flume——Flume采集JSON文件到Kafka,再用Flume采集Kafka数据到HDFS中

一、目的 由于使用了新的Kafka协议&#xff0c;因为根据新的协议推送模拟数据到Kafka中&#xff0c;再Flume采集Kafka数据到HDFS中 二、技术选型 &#xff08;一&#xff09;Kettle工具 准备使用Kettle的JSON input控件和Kafka producer控件&#xff0c;但是搞了1天没搞定&…

操作系统(Operating System)知识点复习——第八章 虚拟内存

目录 0.前言 1.硬件和控制结构 1.1 局部性原理Locality 1.2 分页Paging 1.2.1 多级页表Multi-level Paging System 1.2.2 反向页表/倒排页表Inverted Page Table 1.2.3 快表Translation Lookaside Buffer(TLB) 1.2.4 页尺寸 1.3 分段Segment 1.4 段页混合式Combined …

学习 Rust 的第七天:如何理解引用

大家好&#xff0c; 今天是我学 Rust 的第7天&#xff0c;今天我要来看一下引用和借用。昨天我学习了 Rust 的所有权模型&#xff0c;如果你对 Rust 一无所知的话&#xff0c;那篇文章是必读的。 引用 昨天我们看到&#xff0c;将参数传递给函数与将值赋给另一个变量产生了相…

maven3.9的settings.xml 内容学习

settings.xml 文件介绍 settings.xml 是 Maven 的配置文件&#xff0c;它允许你自定义 Maven 的行为&#xff0c;比如设置仓库、代理、认证信息等。在 Maven 3.9 中&#xff0c;settings.xml 的结构和内容可能与之前的版本相似&#xff0c;但可能会有一些小的改进或变化。下面…

mne-hcp

hcp 数据格式整理 文件夹&#xff1a;4D&#xff0c;tw1,unprocessed文件映射,处理成mne-hcp可以使用的文件组织格式&#xff1a; import os.path as op import hcp#文件映射&#xff1a;将下载的文件映射为mne-hcp可以使用的文件 storage_dir op.expanduser(D:/data_hcp)#~/…

声明式事务

文章目录 1.事务分类1.传统方式解决事务2.声明式事务 2.声明式事务案例1.需求分析2.解决方案分析3.数据表创建4.编写GoodsDao.java1.编写配置文件JdbcTemplate_ioc.xml2.单元测试 5.编写GoodsService.java6.配置事务管理器JdbcTemplate_ioc.xml7.进行测试 3.debug事务管理器Dat…

基于springboot+vue+Mysql的广场舞团管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…