一尘不染

Angular JS-检测何时所有$ http()已完成

angularjs

好的,我$http()在应用程序代码周围无数次通话,

我想知道是否有什么方法/最佳实践来检测$http()应用程序周围的所有内容何时完成(成功/错误完成与返回什么无关,只需要知道是否完成)?

这样我才能显示加载的gif,直到它们加载为止?

谢谢


阅读 218

收藏
2020-07-04

共1个答案

一尘不染

像这样做:

angular.module('app').factory('httpInterceptor', ['$q', '$rootScope',
    function ($q, $rootScope) {
        var loadingCount = 0;

        return {
            request: function (config) {
                if(++loadingCount === 1) $rootScope.$broadcast('loading:progress');
                return config || $q.when(config);
            },

            response: function (response) {
                if(--loadingCount === 0) $rootScope.$broadcast('loading:finish');
                return response || $q.when(response);
            },

            responseError: function (response) {
                if(--loadingCount === 0) $rootScope.$broadcast('loading:finish');
                return $q.reject(response);
            }
        };
    }
]).config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
}]);

然后使用绑定到$rootScope任何地方的事件(最好在指令中使用):

$rootScope.$on('loading:progress', function (){
    // show loading gif
});

$rootScope.$on('loading:finish', function (){
    // hide loading gif
});
2020-07-04