Angularjs 1.3 $http interceptors

Question

I've currently got the following in my app to show a loading animation whenever there are $http requests running, then hidden at the end;

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); }]);

I've been trying to convert this to work with 1.3 but I just can't seem to nail it. I've been referencing these docs $http (interceptor section) but I'm not sure how to re-write it. Can anyone help?

UPDATE: Here's what I've tried already:

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); } }; });

and:

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

But the site fails to load with:

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)

The $httpProvider.responseInterceptors is no longer support in 1.3, you have to use $httpProvider.interceptors instead. — runTarm
– runTarm, Commented Jul 29, 2014 at 3:48
I've tried doing that but it's not behaving as it used to, ie not firing at all — Ben Kilah
– Ben Kilah, Commented Jul 29, 2014 at 4:22
Could you also include what you have tried in the question, I might be able to help point out what's incorrect. — runTarm
– runTarm, Commented Jul 29, 2014 at 4:26
Try not injecting your xmHttpInterceptor: app.config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push('xmHttpInterceptor'); }]); — David Bennett
– David Bennett, Commented Jul 29, 2014 at 4:54
many thanks, that fixed it and it's all working :) - how do I accept a comment or give cred to both you chaps? — Ben Kilah
– Ben Kilah, Commented Jul 29, 2014 at 5:01

falsarella · Accepted Answer · 2015-03-21 23:03:07Z

Since the problem was already solved on the comments, I'm posting it as a community wiki:

The $httpProvider.responseInterceptors is no longer support in 1.3, you have to use $httpProvider.interceptors instead.

-- runTarm

And:

Try not injecting your xmHttpInterceptor:
app.config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push('xmHttpInterceptor'); }]); 
-- David Bennett

Sadegh · Accepted Answer · 2015-06-02 16:10:08Z

For example for using from "Angular Loading Bar" Try this:

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

And:

.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 ); } } } ); } ] );

Collectives™ on Stack Overflow

Angularjs 1.3 $http interceptors

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related