AngularJS，使用服务中的承诺

Question

我有一个来自项目MVP的“非常胖的控制器”控制器之一，我想重构为更模块化和分区化的代码。

目前我的控制器中有一个功能：

1. 对API进行$HTTP调用
2. 使用for循环和switch语句
处理返回的数据
3. 将其保存到范围

我想将其转移到服务中。到目前为止，我有这个：

angular.module('myApp.services', [])
.service('apiService', ['$http', 'webapiBase', function($http, webapiBase) {
  this.getData = function(){
    $http.get(webapiBase + '/api/getData').then(function(res){
      var obj = res.data;
      // Processing stuff
      return obj;
    }, function(err){
      return false;
    })
  }
}]);

在我的控制器中，我需要在此服务返回其数据时运行回调，例如：

// In my Service:
this.getData = function(cb){
    $http.get(webapiBase + '/api/getData').then(function(res){
       var obj = res.data; 
       cb(obj);
    }, function(err){
       cb(false);
    })
  }

// In my controller
apiService.getData(function(data){
    $scope.data = data;
    // Do other stuff here
})   

但这感觉有点奇怪/非''''。'

是否有更多的“Angular”方式来实现这一点，可能在使用$q？

时

Answer 1

您只需要对服务进行一些小修改

  this.getData = function(){
    return $http.get(webapiBase + '/api/getData').then(function(res){
      // Processing stuff
      return object;
    }, function(err){
      return false;
    })
  }

直接返回$http.get的承诺对象。然后在你的控制器

apiService.getData().then(function(data){
    $scope.data = data;
    // Do other stuff here
})

修改

如果您真的不想重复使用$http创建的承诺对象，您可以快速创建自己的承诺对象。

this.getData = function() {
    var deferred = $q.defer();

    $http.get(webapiBase + '/api/getData').then(function(res){
      // Processing stuff
      deferred.resolve(object);
    }, function(err){
      deferred.reject('error');
    });

    return deferred.promise;
}

Answer 2

您可以使用$q来实现您所寻找的目标。

// Your service
angular.module('myApp.services', [])
.service('apiService', ['$http', 'webapiBase', function($http, webapiBase) {
  this.getData = function() {
    var deferred = $q.defer();
    $http.get(webapiBase + '/api/getData').then(
        function (res) {
            // Do something with res.data
            deferred.resolve(res.data);
        },
        function(res){
            deferred.reject();
        }
    );
    return deferred.promise;
  }
}]);

然后在控制器中使用$q承诺并回复它：

// Your controller
apiService.getData().then(function(data) {
    $scope.data = data;
    // Do other stuff here
});

这是Angular-way，使用$q的承诺。