Question

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

e.g。显示加载微调器或模型属性的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()就是你想要的。这样：

将多个承诺合并到一个承诺中，该承诺在所有输入承诺得到解决时解析。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.
});

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

1 个答案: