javascript - 多次异步服务调用后的 AngularJS 函数

Question

我有一个 REST API，我想像这样从 AngularJS 服务调用它:

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);
    }
}]);

那里删除了其他实现细节，例如不重要的身份验证。 API由第三方提供，我无法更改。

GET/api/resources 返回如下内容:

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

GET/api/details/one 返回如下内容:

{ "count": 5 }

然后我有一个 Controller ，我想在其中调用 MyApi.resources()，等待结果，然后针对每个结果调用 MyApi.details(resource) .当对 MyApi.details(resource) 的最终调用完成时，我想运行一个函数来从一组详细信息中聚合一些结果，但我不知道最后如何触发它.

我的 Controller 目前看起来像这样:

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);
}]);

最终实现聚合的最佳方式是什么？

Answer 1

你可以使用 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);        
        });
    }
});