【手撕设计模式】减少业务中冗余的请求——备忘录模式

//这里我使用的是vue框架，第一个参数当前页码，第二个参数是一页展示多少个数据

fetch: function(curPage,pageNum) {
        var self = this;
        Vue.http({
            method: ‘GET‘,
            url:‘/api/......‘,
            params: {
              ‘search‘: this.search,  //搜索内容
              ‘page‘: {
                current: curPage,    //当前页数
                limit: pageNum      //每页展示项目数
              }
            }
          })
          .then(
            function(res){
              //获取数据执行逻辑，渲染列表
            }
          )
      },

data(){
  return{
      ......
      cache:{},//声明一个缓存对象
  }
}

fetch: function(curPage,pageNum) {
        var self = this;
        if(self.cache[curPage]){ //缓存对象中是否存在某次跳转的属性
             //如果存在则使用缓存的内容
             self.Lists = self.cache[curPage].data;  //渲染列表
        }else{     
            //如果不存在某次跳转的缓存对象则向后台发送请求
            Vue.http({
            method: ‘GET‘,
            url:‘/api/......‘,
            params: {
              ‘search‘: self.search,
              ‘page‘: {
                current: self.curPage,
                limit: self.pageNum
              }
            }
          })
          .then(
            function(res){
              //渲染列表并把这次请求的内容缓存在缓存独享中
              self.Lists = res.data.data;
              self.cache[curPage] = res.data;
            }
          )
        }
      },