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

需求背景：

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

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

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

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 进行分割成组，控制每组的个数，然后通过组的形式向后端发送请求

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
}

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

使用如下

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

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

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

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

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的关闭请求的方法来解决，后续会更新代码

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