This document discusses AngularJS $http interceptors, which are event functions triggered during HTTP requests made with $http, $resource, and $httpBackend. There are four types of interceptors: request, requestError, response, and responseError. Interceptors are created as service factory functions and added to the $httpProvider interceptors array. They are useful for applying cross-cutting concerns like request configuration, response transformation, error handling, and authentication checks across an application. Interceptors can control their behavior conditionally based on injected services or objects. Examples demonstrate interceptors for request configuration, 400/403/500 error handling, and response processing.

1. AngularJS $http Interceptors
Explanation and Examples
Brian Swartzfager
bcswartz@gmail.com
http://thoughtdelimited.org

2. What are $http Interceptors
• They are event functions triggered during the
lifecycle of an HTTP call made via AngularJS.
• They will run anytime you execute:
– $http
– $resource
– $httpBackend

3. Types of Interceptors
• request ( configuration )
– Receives and returns a configuration object that defines the outgoing
HTTP call
• requestError ( rejection )
– Receives a rejection object when a previous interceptor (like a request
interceptor) returns an error or rejection
• response ( response )
– Receives and returns a response object from a successful HTTP call
• responseError ( rejection )
– Receives a rejection object when a previous response interceptor
returns an error or rejection
Documentation:
https://docs.angularjs.org/api/ng/service/$http#interceptors

4. Created as Service Factory Functions

5. Added to the $httpProvider
Interceptors Array

6. Uses For Interceptors
• Useful anytime you need to apply the same
checks/actions on HTTP requests and
responses throughout your application
(“cross-cutting concerns”)
– Configuring the outgoing requests in a certain way
– Altering the incoming response for easier
consumption
– Handling certain response errors
– Checking authentication status

7. Conditional Interceptor Behavior
• Use the properties and functions of an injected
object to control or suppress interceptor
behavior.
– An object in the $rootScope
– Or an Angular service

8. request Example

9. responseError Example

10. responseError: 400 error

11. responseError: 403 error

12. responseError: 500 server error

13. response Example
Better approach:
• Move the location management logic to a service function and
inject that service into this interceptor and the responseError
interceptor.

14. Questions?