解决后端返回数据过多问题

在日常编程中我们都会遇到与后端联调接口的各种问题，最常见的就是处理返回数据过多或者数据过于复杂的情况，接下来我们就来一起探索一下如何处理这类问题。

 

后端返回的数据过多会造成页面加载数据的时候卡死不动，那么这种情况我们该如何处理

采用的办法有两种：

                         第一分次加载数据

                         第二滚动加载数据

首先我们来说第一种分页加载数据，话不多说  上代码：

 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;
          
        });
    },

 

完毕，还有好多数组的解构 暂时不在这里细说