解決后端返回數據過多問題

在日常編程中我們都會遇到與后端聯調接口的各種問題，最常見的就是處理返回數據過多或者數據過於復雜的情況，接下來我們就來一起探索一下如何處理這類問題。

 

后端返回的數據過多會造成頁面加載數據的時候卡死不動，那么這種情況我們該如何處理

采用的辦法有兩種：

                         第一分次加載數據

                         第二滾動加載數據

首先我們來說第一種分頁加載數據，話不多說  上代碼：

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

 

完畢，還有好多數組的解構 暫時不在這里細說