javascript - 使用 Restangular 在 Angular 中协调多个 AJAX 调用

Question

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

例如显示加载微调器或模型属性的 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() 是您想要的。这:

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.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.
});