Javascript 如何显示XHR请求的加载图标？

我有一个加载图像，它显示在

$routeChangeStart

上，并在路线更改后隐藏。我试图找到类似这样的东西，可以与xhrStart和xhrSuccess一起使用

    $rootScope.$on('$routeChangeStart', function(){
        $rootScope.loading = true;
    });

    $rootScope.$on('$routeChangeSuccess', function(){
        $rootScope.loading = false;
    });

我知道我能做到：

$rootScope.loading = true;
$http.get('/api/customers').success(function(data) {
   $rootScope.loading = false;
   ...

但这会变得单调乏味

---

angularJS中是否存在可用于显示/隐藏加载图像的XHR事件？

如果加载图形是全局的，则可以使用

httpInterceptor解决此问题。这是一个简单的拦截器实现，可以切换
$rootScope.loading
：

angular.module('myModule').factory('LoadingInterceptor', function ($rootScope) {

        $rootScope.loading = false;

        return {
            request: function (config) {
                $rootScope.loading = true;
                return config;
            },
            response: function (response) {
                $rootScope.loading = false;
                return response;
            }
        };
    })
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push('LoadingInterceptor');
    });

注意：这种幼稚的实现可能会遇到问题。例如，您可能有并行XHR调用（此实现将导致加载程序闪存）。这是因为当第一次调用响应发生时，
$rootScope.loading
被设置回
false
（即使第二次调用仍在进行中）。
如果加载图形是全局的，您可以使用
httpInterceptor
进行此操作。该图形在
$rootScope
上是全局的。我现在正在看文档。非常感谢。