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

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