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

Coordinating multiple AJAX calls in Angular using Restangular

本文关键字：AJAX 调用 协调 Restangular Angular 使用      更新时间：2023-09-26

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

例如，显示加载微调器或模型属性的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的文档有点令人困惑。

我认为$q.all()就是你想要的。这：

将多个承诺合并为一个

承诺，当解析所有输入承诺时，将解析该承诺。

未经测试的示例：

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.
});
相关文章：