AngularJS，在服务中使用promise

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创建的promise对象，则可以创建自己的real quick。

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 promise并对其作出响应：

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

这就是Angular方式，在$q使用promises。