AngularJS $http Interceptors
Explanation and Examples
Brian Swartzfager
bcswartz@gmail.com
http://thoughtdelimited.org
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
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
Created as Service Factory Functions
Added to the $httpProvider
Interceptors Array
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
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
request Example
responseError Example
responseError: 400 error
responseError: 403 error
responseError: 500 server error
response Example
Better approach:
• Move the location management logic to a service function and
inject that service into this interceptor and the responseError
interceptor.
Questions?

AngularJS $http Interceptors (Explanation and Examples)

  • 1.
    AngularJS $http Interceptors Explanationand Examples Brian Swartzfager bcswartz@gmail.com http://thoughtdelimited.org
  • 2.
    What are $httpInterceptors • 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 ServiceFactory 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.
  • 9.
  • 10.
  • 11.
  • 12.
  • 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.