使用Restangular协调Angular中的多个AJAX调用

Question

我有一个Angular应用程序,其视图通过$ scope引用更新到工厂单例公开的某些模型和状态对象.在初始化期间或视图中的某些操作下,工厂必须进行多次AJAX调用(使用Restangular)并等待所有promises在更新其状态和模型属性之前得到解决.在对将来返回的数据应用适当的副作用之前,我该如何等待多个期货得到解决？

例如,显示加载微调器或模型属性的div,以及根据状态刷新此属性的按钮.

<div ng-controller="MyCtrl">
    <div ng-if="state.isLoading" class="loading-animation"></div>
    <div ng-if="!state.isLoading">
        <span ng-bind-template="Property: {{model.property}}"></span>
        <button ng-click="refresh()">Refresh</button>
    </div>    
</div>

App.controller('MyCtrl', ['$scope', 'MyFactory', function('$scope', 'Factory') {
    $scope['model'] = Factory['model'];
    $scope['state'] = Factory['state'];
    $scope.refresh = function() {
        Factory.init();
    };
}])
.factory('MyFactory', ['restangular', function('Rest') {
    var Factory = {
            model = {
                property: null
            },
            state = {
                isLoading = false;
            }
        };

    Factory.init = function() {
        Factory['state']['isLoading'] = true;

        var promise1 = Rest.one('first').get();
            promise2 = Rest.one('second').get();

        // Resolve both promises.
        // Only when both promises are done,
        //     update model.property based on data returned and relevant logic.
        // Toggle isLoading state when finalized. 
    }

    return Factory;    
}])
.run(['MyFactory', function(Factory) {
    Factory.init();
}]);

我遇到的问题是如何在Factory.init()中实现注释部分.我知道我可以使用Angular的$ q,但我不太熟悉延迟对象,我发现Angular关于$ q的文档有点令人困惑.

Answer 1

我想$q.all()是你想要的.这个:

将多个promise组合成一个promise,在解析所有输入promise时解析.1

未经测试的例子:

var promises = [
    Rest.one('first').get(),
    Rest.one('second').get()
];

$q.all(promises).then(function (results) {
    var resultOfFirstPromise = results[0],
        resultOfSecondPromise = results[1];
    // update model.property based on data returned and relevant logic.
});