Question

假设我想在页面首次加载时显示一个div，显示“ajax请求数未完成”/“ajax请求完成次数”，然后在完成X个ajax请求后使其消失，（X可以是javascript中设置的数字）。想看看这将如何工作的例子。到目前为止，我只知道您可以为一个div的显示/隐藏“发出”“加载”和“DONELOADING”事件，尽管这只适用于单个http请求。

Answer 1

可以使用promise数组和$q.all()来确定何时完成所有请求。

简单的例子，因为没有提供代码

var promises=[];
for(i=0; i<5; i++){
    var request=$http.get('someFile');
    promises.push(request};
}
/* inject $q as dependency wherever you use this*/
$q.all(promises).then(function(){
   /* remove loader*/
});

不一定要使用事件来更改加载程序的可见性，可以使用ng-show并在ng-show内更改分配给$q.all()的模型属性。有关更详细的方法，需要查看应用程序中的一些代码示例

angular $q docs

Answer 2

要计算请求，您应该使用angulars $ http service的requestInterceptor api。

var module = angular.module("app", []);

module.factory("RequestStatistic", function () {
    var requests = 0,
        responses = 0,
        incrementRequest = function () {
            requests++;
        },
        incrementResponse = function () {
            responses++;
        },
        getTotalRequests = function () {
            return requests;
        },
        getTotalResponses = function () {
            return responses;
        },
        getPendingRequests = function () {
            return requests - responses;
        };
    return {
        incrementRequest: incrementRequest,
        incrementResponse: incrementResponse,
        getTotalRequests: getTotalRequests,
        getTotalResponses: getTotalResponses,
        getPendingRequests: getPendingRequests
    };
});
module.factory("RequestStatisticInterceptor", function ($q, RequestStatistic) {
    return {
        request: function (config) {
            RequestStatistic.incrementRequest();
            return config || $q.when(config);
        },
        response: function (response) {
            RequestStatistic.incrementResponse();
            return response || $q.when(response);
        },
        responseError: function (rejection) {
            RequestStatistic.incrementResponse();
            return $q.reject(rejection);
        }
    };
});
module.config(function($httpProvider){
    $httpProvider.interceptors.push('RequestStatisticInterceptor');
});

现在你可以制定一个指令来检查RequestStatistic服务并做出适当的反应

Answer 3

不完全确定你对“ajax请求”的意思，但我假设你正在调用某种异步服务，例如：

angular.module('myApp').factory('myService', [
    '$q',
    '$timeout',
    function($q, $timeout){
        return {
            load: function(millisecs) {
                var deferred = $q.defer();
                $timeout(function(){
                    deferred.resolve({foo: 'bar'});
                }, (Math.floor(Math.random() * 9) + 1) * 1000);
                return deferred.promise;
            }
        }
    }
]);

您可以在控制器中保留一个计数器，并在每个请求完成时递增它：

angular.module('myApp').controller('myController', [
    '$scope',
    '$timeout',
    'myService',
    function($scope, myService){
        $scope.requests = {
            count: 10,
            started: 0,
            completed: 0
        }
        while($scope.requests.started < $scope.requests.count){
            $scope.requests.started++
            myService.load().then(function(){
                $scope.requests.completed++
            });            
        }
    }
]);

示例@ JSFiddle：http://jsfiddle.net/iH473/3rGjm/

如何显示加载图像，然后在angularjs中的4个ajax请求后使其消失？

3 个答案: