angularJs中$q的两种写法

Posted 2020-08-25 飞凡123

带缓存处理的两种写法

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

在线浏览

写法1：

    function demo(){
      if (demo.cache == undefined) {
        return $http.get(‘https://api.github.com/users/github‘)
          .success(function(data, status, headers){
            demo.cache = 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(){
      var deferred = $q.defer();
      if (demo.cache == undefined) {
        $http.get(‘https://api.github.com/users/github‘)
          .success(function(data, status, headers){
            demo.cache = data;
            deferred.resolve(demo.cache);
          })
      }else {
        console.log(‘from cache‘);
        deferred.resolve(demo.cache);
      }
      return deferred.promise; 
    }


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