关于ajax缓存数据分页实现

做项目时，难免会遇到数据量非常大的时候，这时我们向服务器发送请求获取全部数据时，难免引起性能问题，解决办法之一就是分页查询了，以小块化请求服务器会大大减轻双方的压力。
那么涉及到分页时，用户点击某一个分页按钮时，会发送一次网络请求，但是当他们点击之前点击过的分页按钮，若是再次发送网络请求，这样就会造成资源浪费了，所以我们就得把这些数据缓存起来。。。

我们得首先知道当前的页码和要查询数据的条数，这里涉及到后端的数据库操作，就不再详谈了。

一、 获取分页点击元素：

var lis = document.getElementsByTagName('li');
[...lis].forEach((item,index) => {
    item.onclick = function(){
        let data = cacheData.get(index + 1);   
        console.log(data);
    }
})

二、发送ajax请求

function getData(page) {
     ajax({
         url: 'http://127.0.0.1:7001/carton',
         data: {
             page: page,
             num: 5    
         },
         success: function(res){
             // 直接缓存数据了  
             cacheData.set(page, res.data);
             // 有个限制问题 网络请求的数据无法抛出
         }
     })
 }

三、判断数据是否缓存
这里用到了闭包思想，也就是外部能拿到内部函数变量的数据，为什么采用闭包呢？是为了防止过多的全局变量导致变量污染。

// 做ajax请求缓存 使用闭包
function cacheAjax(){
    var cache = {};
    return {
        get(page) {
            // 判断缓存对象是否有该页码
            if(page in cache) {
                // 说明在缓存对象里 我们就直接去获取缓存中的数据了
                console.log('在'+page+'我走缓存了');
                return cache[page];
            } else {
                // 没有走缓存 发送请求
                getData(page)
            } 
        },
        set(page, data) {
            // 在缓存对象里设置缓存数据
            cache[page] = data;
        }
    }  
}
var cacheData = cacheAjax();

但是若是我们直接这样写，会有一个问题：第一次的请求在ajax里的success函数里获取，第二次缓存的数据会从缓存对象cache里得到，若是我们直接在点击事件打印了data，会出现：

第一次会得到undefined，是因为我们用闭包产生的cache对象里第一次根本没有发网络请求的数据，我还是想要直接从点击事件里直接能获取数据，该怎么办呢？
我是用到了promise，把数据直接抛出去：
完整代码：

  function getData(page) {
     return new Promise(reslove => {
         ajax({
             url: 'http://127.0.0.1:7001/carton',
             data: {
                 page: page,
                 num: 5
             },
             success: function (res) {

                 // 直接缓存数据了  
                 cacheData.set(page, res.data);
                 // 有个限制问题 网络请求的数据无法抛出
                 reslove(res.data)
             }
         })
     })
 }
 var cacheData = cacheAjax();
 var lis = document.getElementsByTagName('li');
 [...lis].forEach((item,index) => {
     item.onclick = async function(){
         let data = await cacheData.get(index + 1);   
             console.log(data);
         // let data = cacheData.get(index + 1);   
         //     console.log(data);
     }
 })
 // 做ajax请求缓存 使用闭包
 function cacheAjax(){
     var cache = {};
     return {
         async get(page) {
             // 判断缓存对象是否有该页码
             if(page in cache) {
                 // 说明在缓存对象里 我们就直接去获取缓存中的数据了
                 console.log('在'+page+'我走缓存了');
                 return cache[page];
             } else {
                 // 没有走缓存 发送请求
                 // getData(page)
                 return await getData(page);
             } 
         },
         set(page, data) {
             cache[page] = data;
         }
     }          
 }

这样无论是缓存的得到数据还是发送网络请求获取的数据统统都能从点击事件里面直接获取了。