在日常编程中我们都会遇到与后端联调接口的各种问题，最常见的就是处理返回数据过多或者数据过于复杂的的情况，接下来我们就来探索一下如何处理这类问题。
后端返回的数据过多会造成页面加载数据的时候卡死不动，那么这种情况下我们该如何处理
采用的办法有两种：
第一分次加载数据
第二滚动加载数据
首先我们来说第一种分页加载数据，话不多说 上代码：
var total = 10000; // 总条数 var once = 1000; // 每次加载条数 var loadCount = total / once; // 加载次数 var recordCount = 0; var ulObj = document.querySelector("ul.async-load"); function addLi(){ // 性能优化，创建一个虚拟的dom节点 var fragment = document.createDocumentFragment(); for(var index = 0 ; index < once ; index ++){ var li = document.createElement("li"); li.innerText = `<li>这是第${recordCount}次加载</li> li${index}`; fragment.appendChild(li); } ulObj.appendChild(fragment); recordCount++; loop(); } function loop(){ if(recordCount < loadCount){ window.requestAnimationFrame(addLi) } } loop();
那么第二种滚动加载数据：
// 滚动加载数据 var scrollUl = document.querySelector("ul.scroll-load"); var scrollRecordCount = 0; function scrollLoad(){ var boxHeight = $(".scroll-load").height(), total = 10000, once = 1000, loadCount = total / once; loadata(once , scrollRecordCount); $(".scroll-load").scroll(function(){ var realHeight = $(".scroll-load")[0].scrollHeight; var scrollHeight = $(this).scrollTop(); if(boxHeight+scrollHeight + 50 >= realHeight && scrollRecordCount < loadCount){ // 加载数据 loadata(once , scrollRecordCount); } }) } // 加载数据 function loadata(once , recordCount){ console.log(recordCount); var fragment = document.createDocumentFragment(); for(var index = 0 ; index < once ; index++){ var li = document.createElement("li"); li.innerText = `<li>这是第${recordCount}次加载 li${index}</li>` fragment.appendChild(li); } scrollUl.appendChild(fragment); scrollRecordCount++; } scrollLoad();
最后在页面上加上监听页面耗时时间：
window.onload = () => { const load = Date.now() - performance.timing.navigationStart; $("h1").html(`页面消耗了 ${load} ms`); }
那么接下来我们来看页面数据返回双重嵌套怎么办
getOpenClass() { this.$http .get(basePath1 + "/ExamArticle/PCLiveClass", { params: { DirectoryId: this.menuId, TypeId: 1 }, }) .then((res) => { const { Info: infoArr = [] } = res.data || {}; this.openClasses = infoArr.reduce((cur, item) => { return cur.concat((item && item.LiveLists) || []); }, []); this.openClasses = this.openClasses; }); },
完毕，还有好多数组的解构 暂时不在这里细说
原文：https://www.cnblogs.com/thy10lxsx/p/14605327.html