angularJs中缓存数据，免去重复发起请求的几种写法

带缓存处理的两种写法

过程:点击button触发load()方法，请求数据成后显示到页面中。如果已经请求过则从缓存中读取。

在线浏览

写法1：

    function demo(){
      if (demo.cache == undefined) {
        return $http.get('https://api.github.com/users/github')
          .then(function(data, status, headers){
            demo.cache = data.data;
            return $q(function (resolve, reject) {
              resolve(demo.cache);
            });
          })
      }else {
        console.log('from cache');
        return $q(function (resolve, reject) {
          resolve(demo.cache);
        });
      }
    }


    // 点击加载
    $scope.load = function() {
      demo().then(function(data){
        $scope.list = data.data;
      })
    }

写法2：

感觉第二种写法好些，注意细节。

    function demo(){
      let deferred = $q.defer(), that = this;if (that.cache == undefined) {
        $http.get('https://api.github.com/users/github')
          .success(function(data, status, headers){
            that.cache = data;
            deferred.resolve(that.cache);
          })
      }else {
        console.log('from cache');
        deferred.resolve(that.cache);
      }
      return deferred.promise; 
    }


    // 点击加载
    $scope.load = function() {
      demo().then(function(data){
        $scope.list = data;
      })
    }

 

写法3 利用闭包缓存结果

    // 利用闭包缓存结果
    function demo2() {
      let defer = $q.defer(), cache;
      return function() {
        if (cache == undefined) {
          $http.get('https://api.github.com/users/github')
              .then((res) => {
                  cache = res.data;
                  defer.resolve(cache);
              })
        }else {
          console.log('from cache');
          defer.resolve(cache);
        }
        return defer.promise;
      }
    }

    // 点击加载
    let startDemo = demo2();
    $scope.load = function() {
      startDemo().then(function(data){
        $scope.list = data;
      })
    }