Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Intercept XHR/Ajax requests with AngularJS http interceptors. This allows you to globally intercept and modify requests and responses. You don't need to declare all of the methods, just the ones you need. Some example uses would be logging errors, adding extra headers, or triggering 'loading' screens. This intercepts ALL requests/responses, so y…
// Intercepting HTTP calls with AngularJS.
angular.module('MyApp', [])
.config(function ($provide, $httpProvider) {
// Intercept http calls.
$provide.factory('MyHttpInterceptor', function ($q) {
return {
// On request success
request: function (config) {
// console.log(config); // Contains the data about the request before it is sent.
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError: function (rejection) {
// console.log(rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response: function (response) {
// console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failture
responseError: function (rejection) {
// console.log(rejection); // Contains the data about the error.
// Return the promise rejection.
return $q.reject(rejection);
}
};
});
// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('LoggingHttpInterceptor');
});
@facultymatt

This comment has been minimized.

Show comment Hide comment
@facultymatt

facultymatt Aug 28, 2013

Worth noting this only works for Angular 1.1.4 and above. :)

Worth noting this only works for Angular 1.1.4 and above. :)

@kylebuch8

This comment has been minimized.

Show comment Hide comment
@kylebuch8

kylebuch8 Nov 13, 2013

Did you mean to push MyHttpInterceptor to the interceptors array instead?

Did you mean to push MyHttpInterceptor to the interceptors array instead?

@malikov

This comment has been minimized.

Show comment Hide comment
@malikov

malikov Nov 14, 2013

@kylebuch8 was thinking the same thing :) MyHttpInterceptor instead of LoggingHttpInterceptor or perhaps changing the name in $provide.factory

malikov commented Nov 14, 2013

@kylebuch8 was thinking the same thing :) MyHttpInterceptor instead of LoggingHttpInterceptor or perhaps changing the name in $provide.factory

@zeroows

This comment has been minimized.

Show comment Hide comment
@zeroows

zeroows Dec 31, 2013

The last line should be

// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('MyHttpInterceptor');

zeroows commented Dec 31, 2013

The last line should be

// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('MyHttpInterceptor');

@emonidi

This comment has been minimized.

Show comment Hide comment
@emonidi

emonidi Feb 26, 2014

I was not aware that http interceptors exist and you can do that. This is exactly the kind of solution I've been looking for for the project I am currently working on. Thank you so much.

emonidi commented Feb 26, 2014

I was not aware that http interceptors exist and you can do that. This is exactly the kind of solution I've been looking for for the project I am currently working on. Thank you so much.

@michaelwills

This comment has been minimized.

Show comment Hide comment
@michaelwills

michaelwills Mar 5, 2014

Nice thing about this is you can modify requests for UI router partial loading.

Nice thing about this is you can modify requests for UI router partial loading.

@biapar

This comment has been minimized.

Show comment Hide comment
@biapar

biapar Jun 30, 2014

With token?

biapar commented Jun 30, 2014

With token?

@meffect

This comment has been minimized.

Show comment Hide comment
@meffect

meffect Jun 2, 2015

doesnt work , using angular 1.4

meffect commented Jun 2, 2015

doesnt work , using angular 1.4

@shali3

This comment has been minimized.

Show comment Hide comment
@shali3

shali3 Jun 17, 2015

In line 29 why do we need the $q.when(response) if it's empty?

shali3 commented Jun 17, 2015

In line 29 why do we need the $q.when(response) if it's empty?

@perpantha

This comment has been minimized.

Show comment Hide comment
@perpantha

perpantha Mar 10, 2016

Can confirm this doesn't seem to work in Angular 1.4.8. Which is a shame.

Can confirm this doesn't seem to work in Angular 1.4.8. Which is a shame.

@vejandla

This comment has been minimized.

Show comment Hide comment
@vejandla

vejandla Mar 2, 2018

Does this work with iframe requests?

vejandla commented Mar 2, 2018

Does this work with iframe requests?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment