Javascript 多个异步服务调用后的AngularJS函数

我想从AngularJS服务调用一个REST API，如下所示：

angular.module('myModule').service('MyApi', ['$http', function($http) {
    return ({
        resources: resources,
        details: details
    });

    function resources() {
        return $http.jsonp('/api/resources');
    }

    function details(key) {
        return $http.jsonp('/api/details/' + id);
    }
}]);

angular.module('myModule').controller('MyCtrl', ['$scope', 'MyApi', function($scope, MyApi) {
    $scope.results = new Array();

    MyApi.resources().then(function(response) {
        var resources = response.data;
        var length = resources.length;

        for (var i = 0; i < length; i++) {
            MyApi.details(resources[i].key).then(function(response) {
                $scope.results.push(response.data.count);
            });
        }
    });

    // how do I get this line to run only after all the results are returned?
    $scope.total = $scope.results.reduce(function(a, b) { return a + b; }, 0);
}]);

还有一些其他的实现细节被删除了，比如身份验证，这些都不重要。API是由第三方提供的，所以我无法更改它

GET/api/resources

返回如下内容：

[{ "key": "one" }, { "key": "two" }]

{ "count": 5 }

GET/api/details/one

返回如下内容：

[{ "key": "one" }, { "key": "two" }]

{ "count": 5 }

然后我有一个控制器，我想在其中调用

MyApi.resources（）

，等待结果，然后为每个结果调用

MyApi.details（resource）

。当对

MyApi.details（resource）

的最后一次调用完成时，我想运行一个函数来聚合来自细节集的一些结果，但我不知道最后如何触发它

我的控制器当前看起来如下所示：

angular.module('myModule').service('MyApi', ['$http', function($http) {
    return ({
        resources: resources,
        details: details
    });

    function resources() {
        return $http.jsonp('/api/resources');
    }

    function details(key) {
        return $http.jsonp('/api/details/' + id);
    }
}]);

angular.module('myModule').controller('MyCtrl', ['$scope', 'MyApi', function($scope, MyApi) {
    $scope.results = new Array();

    MyApi.resources().then(function(response) {
        var resources = response.data;
        var length = resources.length;

        for (var i = 0; i < length; i++) {
            MyApi.details(resources[i].key).then(function(response) {
                $scope.results.push(response.data.count);
            });
        }
    });

    // how do I get this line to run only after all the results are returned?
    $scope.total = $scope.results.reduce(function(a, b) { return a + b; }, 0);
}]);

angular.module（'myModule'）。控制器（'MyCtrl'，['$scope'，'MyApi'，函数（$scope，MyApi）{
$scope.results=新数组（）；
MyApi.resources（）.then（函数（响应）{
var资源=response.data；
var-length=resources.length；
对于（变量i=0；i

---

最后实现聚合的最佳方法是什么？

在第一个内部。然后，创建一个承诺，并将循环中的所有请求链接起来，然后返回它。然后，您可以使用.Then在代码完成后运行代码

angular.module('myModule').controller('MyCtrl', ['$scope', 'MyApi', function($scope, MyApi) {
    $scope.results = new Array();

    MyApi.resources().then(function(response) {
        var resources = response.data;
        var length = resources.length;
        var promise;

        function getDetails(key) {
            return function () {
                MyApi.details(key).then(function(response) {
                    $scope.results.push(response.data.count);
                })
            };
        }

        for (var i = 0; i < length; i++) {
            if (i === 0) {
                promise = getDetails(resources[i].key)();
            } else {
                promise.then(getDetails(resources[i].key));
            }
        }
        return promise;
    }).then(function () {
        $scope.total = $scope.results.reduce(function(a, b) { return a + b; }, 0);
    });
}]);

angular.module（'myModule'）。控制器（'MyCtrl'，['$scope'，'MyApi'，函数（$scope，MyApi）{
$scope.results=新数组（）；
MyApi.resources（）.then（函数（响应）{
var资源=response.data；
var-length=resources.length；
var承诺；
函数getDetails（键）{
返回函数（）{
MyApi.details（key）.then（函数（响应）{
$scope.results.push（response.data.count）；
})
};
}
对于（变量i=0；i

您可以使用deferred的函数$q.all

angular.module('myModule').controller('MyCtrl', ['$scope', 'MyApi', '$q', function($scope, MyApi, $q) {
    $scope.results = new Array();

    MyApi.resources().then(function(response) {
        var resources = response.data;
        var length = resources.length;

        var defer = $q.defer();
        var promises = [];

        angular.forEach(resources, function(value) {
            promises.push(MyApi.details(resources[i].key));
        });

        $q.all(promises).then(function() {
            $scope.total = $scope.results.reduce(function(a, b) { return a + b; }, 0);        
        });
    }
});

两种方式：

• $q服务
  使用$q.all（）来查看您的所有详细信息

• 承诺链
  只有解决了上一个问题，才调用下一个详细信息

---

继续链接，然后。对.details的每次调用都应更改为原始的.then.this将在最终的details调用完成时调用一次totaling函数，还是在每次返回一个details调用时调用它？final.then将发生一次。我刚刚尝试了这个方法，但它不起作用，因为循环中的

else

部分已被删除

i

作为捕获变量。当它执行时，

i

大于

资源的长度

，因此您会得到一个异常。哎呀，至少这是一个简单的解决方法。还有干衣机。