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

亚当·罗杰

我有一个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 }

然后,我有一个要在其中调用的控制器MyApi.resources(),等待结果,然后对每个结果调用MyApi.details(resource)当最后一次调用MyApi.details(resource)完成时,我想运行一个函数来汇总一组详细信息中的某些结果,但最终我无法弄清楚如何触发此结果。

我的控制器当前如下所示:

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

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

乔·萨曼尼克

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

服务调用后angularjs形成动作

来自分类Dev

在服务调用后重绘 Highcharts - Angularjs

来自分类Dev

AngularJS:多个异步AJAX调用

来自分类Dev

使用Backbone进行多个异步ajax调用后呈现视图

来自分类Dev

并行调用异步函数的多个调用

来自分类Dev

完成多个异步调用后,AJAX会启动最终的异步调用

来自分类Dev

检查多个异步Web服务调用的结果

来自分类Dev

PHP 异步调用多个函数

来自分类Dev

AngularJS和服务内部的异步函数

来自分类Dev

AngularJS和服务内部的异步函数

来自分类Dev

为什么在异步Ajax调用后AngularJs的视图没有更新?

来自分类Dev

异步函数调用后从工厂返回一个有角度的$ resource

来自分类Dev

异步函数调用后从工厂返回一个有角度的$ resource

来自分类Dev

函数调用后指针更改

来自分类Dev

C:函数调用后的指针

来自分类Dev

If 语句在函数被调用后运行

来自分类Dev

多次异步调用后回调?

来自分类Dev

异步调用后DOM更新

来自分类Dev

异步调用后无法刷新UI

来自分类Dev

AngularJs 从控制器调用服务函数

来自分类Dev

Angularjs 从控制器调用服务函数

来自分类Dev

在AngularJS自定义验证指令中调用异步服务

来自分类Dev

AngularJS:具有异步请求的多个依赖服务

来自分类Dev

在页面构造函数中异步调用Web服务

来自分类Dev

函数调用异步时服务未定义

来自分类Dev

正确的过程以在Node.js中调用多个异步函数

来自分类Dev

RSVP.js-数组上的多个异步函数调用

来自分类Dev

正确的过程以在node.js中调用多个异步函数

来自分类Dev

试图在javascript中异步调用函数(使用angularjs)