Angularjs 1.3 $ http拦截器

Question

我目前在我的应用程序中有以下内容，每当有$ http请求运行时显示加载动画，然后隐藏在最后;

app.config(['$httpProvider', function ($httpProvider) {
    var $http,
        interceptor = ['$q', '$injector', function ($q, $injector) {
            var error;

            function response(response) {
                // get $http via $injector because of circular dependency problem
                $http = $http || $injector.get('$http');
                if ($http.pendingRequests.length < 1) {
                    $('#loadingWidget').hide();
                }
                return response;
            }

            function responseError(response) {
                if (response.status == 401) {
                    alert("You have been logged out or have tried to access a restricted area, redirecting to the login screen...");
                    window.location = globals.siteUrl + 'login';
                } else {
                    // get $http via $injector because of circular dependency problem
                    $http = $http || $injector.get('$http');
                    if ($http.pendingRequests.length < 1) {
                        $('#loadingWidget').hide();
                    }
                }
                return $q.reject(response);
            }

            return function (promise) {
                $('#loadingWidget').show();
                return promise.then(response, responseError);
            }
        }];

        $httpProvider.responseInterceptors.push(interceptor);

}]);

我一直试图将其转换为使用1.3，但我似乎无法指出它。 我一直在引用这些文档$ http （拦截器部分），但我不确定如何重写它。 有人可以帮忙吗？

更新：这是我已经尝试过的：

app.factory('xmHttpInterceptor', function ($q, $http, $injector) {
    return {
        // optional method
        'response': function (response) {
            // get $http via $injector because of circular dependency problem
            $http = $http || $injector.get('$http');
            if ($http.pendingRequests.length < 1) {
                $('#loadingWidget').hide();
            }
            return response;
        },

        // optional method
        'responseError': function (rejection) {
            alert(rejection);
            // do something on error
            if (canRecover(rejection)) {
                return responseOrNewPromise
            }
            return $q.reject(rejection);
        }
    };
});

和：

app.config(['$httpProvider', 'xmHttpInterceptor', function ($httpProvider, xmHttpInterceptor) {
    $httpProvider.interceptors.push('xmHttpInterceptor');
}]);

但该网站无法加载：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.17/$injector/modulerr?p0=app&p1=Erro…s.org%2F1.3.0-beta.17%2F%24injector%2Funpr%3Fp0%3DxmHttpInterceptor%0A%20%...<omitted>...4) 

Answer 1

由于问题已在评论中得到解决，我将其作为社区维基发布：

$httpProvider.responseInterceptors不再支持1.3，你必须使用$httpProvider.interceptors 。

- runTarm

和：

尽量不要注入你的xmHttpInterceptor ：

 app.config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push('xmHttpInterceptor'); }]); 

- 大卫贝内特

Answer 2

例如，使用“ Angular Loading Bar ”试试这个：

angular.module( 'myApp', [
    .
    .
    'angular-loading-bar',
    .
    .
] )

和：

.config( [ '$httpProvider',
    function ( $httpProvider ) { 

        $httpProvider.interceptors.push( function ( $q, $injector, cfpLoadingBar ) { 
            var $http;

            return {

                request: function ( config ) { 
                    cfpLoadingBar.start();
                    return config;
                },

                response: function ( response ) { 
                    // get $http via $injector because of circular dependency problem
                    $http = $http || $injector.get( '$http' );
                    if ( $http.pendingRequests.length < 1 ) { 
                        cfpLoadingBar.complete();
                    }
                    return response;
                },

                responseError: function ( response ) { 
                    // get $http via $injector because of circular dependency problem
                    $http = $http || $injector.get( '$http' );
                    if ( $http.pendingRequests.length < 1 ) { 
                        cfpLoadingBar.complete();
                    }
                    return $q.reject( response );
                }
            }
        } );
    }
] );