JS 处理后端返回大量数据

先说场景 在用uniApp 开发小程序时 遇到后端有一个接口一次性返回了超100条数据 

此时在前端写的代码 this.swiperList = res.data ; 直接导致微信小程序报警 如图

这样子导致页面全部受到影响，数据加载变得非常卡顿。来看如何处理。

首先找到卡顿的原因 ：  小程序是使用setData进行数据传递。官方要求是单词数据传递不能超过1024kb

而正常我实际开发中大部分都是直接 this.xxx =  res.data ;  这样就直接导致了setData 可能会出现传输数据过大，而影响页面性能的问题。

怎么解决？ 

既然一次传输过多数据不可以，我能想到的方式是，可不可以后端做分页  答案是 部分场景优先后端进行分页，前端对各种状态下进行分页请求，例如，下拉，或者，触底加载等，这里不做赘述，我们来看另外一种问题场景。


如果这些数据假设有1万条。需求就是不能做分页，一次调用解决问题，但前端需要不能让页面卡死。

答案就是 异步任务 +  二维数组 分批导入。

	groupData(data,split) {
			let result = [];
			let groupItem;
			for (var i = 0; i < data.length; i++) {
				//每20条数据分割为一个数组
				if (i % split == 0) {
					groupItem != null && result.push(groupItem);
					groupItem = [];
					console.log(groupItem,'start')
				}
				groupItem.push(data[i]);
				console.log(groupItem,'itemmm')
			}
			result.push(groupItem);
			console.log(result,'resultlll')
			return result;
		},

findBuyinfoBYidApi() {
			findBuyinfoBYid({
				id: this.RushBuyId
			}).then(res => {
				if (res.data.result.records && res.data.result.records.length > 0) {
					首先先不将数据绑定 而是定义临时变量保存
 					let data = res.data.result.records; //包含大量数据的数组
                    调用提前封装好的方法 将n条数据分割为20份 也就是每20条数据为一个数组
					let groupData = this.groupData(data,20); 
                    最终将得出一个二位数组 里面数组又嵌套了实际的数据 
					for (let i = 0; i < groupData.length; i++) {
						setTimeout(() => {
                            异步任务加入  每i*1000秒  并解构数据将数据实际传递
							this.VerticalSwiper.push(...groupData[i]);
						}, 1000 * i);
					}
				}
			})
		},

上图大家看的比较直观