Question

我在AngularJS的页面中有4个控制器。每个控制器通过http请求（范围$ http）调用Api。我想确保所有的Api都被调用并加载到那时我才能显示加载的gif图像。如何检查所有Api已经加载到AngulaJS的页面中。

Answer 1

$http对其API使用promises（$q）。在解析$http个请求数组时，您可以使用$q.all方法运行回调（您需要确保所有服务请求都返回promises以避免未定义的行为）。

将多个promises组合成一个promise，当所有输入promise都被解析时解析。

它看起来像这样

$scope.showLoadingGif = true;
$q.all([MyService.makeGet(), MyService.makeAnotherGet(), ...]).then(function(responses) {
    // all the calls have returned a response by this point
    $scope.showLoadingGif = false;
})

Answer 2

I am not sharing the exact code some variable and name I have modified.    
 myApp.controller('testController',function ($scope, $http, $q, $filter) {

    var _promises = {};

        _promises['abc'] =
            $http({
                url: API_URL+'abc-type/',
                method: 'GET',
                params: {'test1': 'test2'}
            });

        _promises['abc1'] =
            $http({
                url: API_URL+'abc-type2/',
                method: 'GET'
            });

        }
    $q.all(_promises).then(function (res) {
            alert("All promises executed.");
        });
    });

确保所有Api都已加载到AngularJS的页面中

2 个答案: