如何进行函数调用取决于AngularJS中两个$ http调用的完成?

时间:2013-11-11 11:23:37

标签: angularjs

在我的控制器中,我有以下电话:

optionService.init($scope);
optionService.getSubjects1($scope);
optionService.getSubjects2($scope);
optionService.getAbc($scope);

以下是optionService的代码:

angular.module('common')
    .factory('optionService',
    ['$http',function ($http) {
        var factory = {
            init: function ($scope) {
                $scope.option = {};
            },
            getSubjects1: function ($scope) {
                var url = '/api/Subject1/GetSelect';
                $scope.loading++;
                $http.get(url)
                    .success(function (data, status, headers, config) {
                        $scope.option.subjects1 = data;
                        $scope.loading--;
                    })
                    .error(function (data, status, headers, config) {
                        $scope.loading--;
                        alert("Error: No data returned from " + url);
                    });
            },
            getSubjects2: function ($scope) {
                var url = '/api/Subject2/GetSelect';
                $scope.loading++;
                $http.get(url)
                    .success(function (data, status, headers, config) {
                        $scope.option.subjects2 = data;
                        $scope.loading--;
                    })
                    .error(function (data, status, headers, config) {
                        $scope.loading--;
                        alert("Error: No data returned from " + url);
                    });
            },
        }
        return factory;

    }]);

有没有办法可以调用optionService.getAbc取决于getSubjects1和getSubjects2调用的完成?如果这有任何不同,我也将很快使用Angular 1.2。

2 个答案:

答案 0 :(得分:1)

$q.all(promises)可让您将多个承诺合并为一个:

optionService.getAbc = function($scope) {
    $q.all([
       optionService.getSubjects1($scope), 
       optionService.getSubjects2($scope)
     ])
     .then(function() {
       //...
     });
 }

修改即可。是的,您需要从getSubjects函数返回承诺。要将代码更改保持在最低限度,您可以执行以下操作:

optionService.getSubjects1($scope) {
  var url = '/api/Subject1/GetSelect';
  $scope.loading++;
  return $http.get(url)
    .then(function (data, status, headers, config) {
      $scope.option.subjects1 = data;
      $scope.loading--;
    }, function (data, status, headers, config) {
      $scope.loading--;
      alert("Error: No data returned from " + url);
    });
}

使用$http.then(),您可以创建一个新承诺,可以与getAbc()

中的其他承诺结合使用

答案 1 :(得分:0)

您应该重写getSubject1getSubject2以返回承诺。将$scope传递给方法并从服务方法更新范围也不是一种好的方法。您的服务方法应该返回代码中可分配的数据。这使您的服务更具可用性和可读性。

如果您在

行中更改getSubject1getSubject2
getSubjects1: function () {
                var url = '/api/Subject1/GetSelect';
                return $http.get(url);
}

在您的控制器中,您可以

$q.all([
       optionService.getSubjects1(), 
       optionService.getSubjects2()
     ])
     .then(function([data1, data2]) {
       //use data1 to update scope for subject1
       // use data2 to update scope for subject2
       //call any service method.
 });