AngularJS $http Interceptors (Explanation and Examples)

Slide deck from a 10-minute lightning talk on AngularJS $http interceptors (what they are, how to write them, and what you can use them for) presented at the AngularJS Meetup hosted by Difference Engine in Washington DC on Feb. 18, 2015.

1. AngularJS $http Interceptors Explanation and Examples Brian Swartzfager [email protected] 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. C reated as Service F actory F unctions

5. Added to the $ httpProvider Interceptors A rray

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. r equest Example

9. responseError Example

10. responseError : 400 error

11. responseError : 403 error

12. responseError : 500 server error

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

14. Questions?