Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hacking $http

Josh Crowther
September 27, 2016

Hacking $http

Angular $http is a great interface for making HTTP requests. It is configurable, easy-to-use and comes out of the box with each version of Angular. HTTP Interceptors give the $http service a whole new level of usability by allowing app wide configuration of the standard $http request. With Interceptors you can customize request headers, parse XML responses, and even implement a request retry service all without changing the already defined $http() function call!

In this presentation we’ll dive into everything you need to know to get up and running with HTTP Interceptors!

External Sources/References:
https://github.com/jshcrowthe/HTTPInterceptor-demo
https://jcrowther.io/2015/05/19/angular-js-http-interceptors/

Josh Crowther

September 27, 2016
Tweet

More Decks by Josh Crowther

Other Decks in Technology

Transcript

  1. ABOUT ME JOSH CROWTHER - @JSHCROWTHE ▸ Tech Lead @

    FamilySearch ▸ Open Source Advocate ▸ Node.js ▸ Web Components ▸ Polymer ▸ Technology Enthusiast ▸ Internet of Things ▸ Web
  2. PRESENTATION ROADMAP TOPICS ▸ AJAX ▸ Raw XHR ▸ fetch

    ▸ $http ▸ Basic Usage ▸ Configuration Options ▸ Why $http? ▸ Service with $http ▸ Examples ▸ Request Logging Interceptor ▸ Request Retry Interceptor ▸ Re-Authentication Interceptor
  3. I’M GOING TO BE SHOWING A LOT OF CODE! Josh

    Crowther (Me) PRESENTATION ROADMAP
  4. $HTTP CONFIG OPTIONS ▸ method ▸ url ▸ params ▸

    headers ▸ data (For POST/PUT requests) ▸ cache ▸ timeout ▸ xsrfHeaderName ▸ xsrfCookieName ▸ transformRequest ▸ transformResponse ▸ paramSerializer ▸ withCredentials ▸ responseType
  5. WHY $HTTP BENEFITS OF USING $HTTP ▸ Automatic Query Param

    serialization ▸ Angular digest cycle integration ▸ Built in abort mechanism ▸ Built in local cache mechanism ▸ Pre-Built Unit test service mock ▸ HTTP Interceptor integration
  6. SERVICE WITH $HTTP BASIC CRUD SERVICE ▸ Create - postData(formData)

    ▸ Read - getData ▸ Update - updateData(id, formData) ▸ Delete - deleteData(id)
  7. HTTP INTERCEPTORS WHAT ARE HTTP INTERCEPTORS? ▸ Extension of the

    HTTP Provider ▸ App level control of the $http service ▸ Allow developers to modify the behavior of requests, responses and errors in their app.
  8. REQUEST INTERCEPTORS Request interceptors are fired before the request ever

    is sent to the network. The request interceptor is passed the config object of the request and can be manipulated as desired.
  9. REQUEST ERROR INTERCEPTORS requestError interceptors are typically fired when a

    request was rejected by another HTTP Interceptor. You can handle this error and potentially recover the request by returning a valid config object (or a promise that resolves with one)
  10. RESPONSE INTERCEPTORS Response interceptors are fired after a successful request

    before the promise, returned by $http, resolves. Allows modification of the response body before the 'then' function.
  11. RESPONSE ERROR INTERCEPTORS ResponseError interceptors fire after a failed $http

    call. Allows you to attempt to handle the failure by returning a new object/promise or you can not and just fail the request as usual. This handling will all happen before the error handler of the promise returned by $http.
  12. HTTP INTERCEPTORS HTTP INTERCEPTOR LIFECYCLE request
 Interceptor requestError 
 Interceptor

    response
 Interceptor responseError 
 Interceptor Network
 Request
  13. REVIEW HTTP INTERCEPTOR REVIEW ▸ HTTP Interceptors allow us to

    modify the request and response in addition to handling errors of an AJAX call made using $http. ▸ There are 4 types of HTTP interceptors: request, requestError, response, and responseError. These represent the 4 possible types of requests.
  14. REQUEST LOGGER IMPLEMENTATION ROADMAP ▸ Capture all error’ing requests ▸

    Handle all requests with 502/503 response code ▸ Create retry strategy ▸ Replace the current, failed, request with a new request
  15. REQUEST LOGGER IMPLEMENTATION ROADMAP ▸ Capture all error’ing requests ▸

    Handle all requests with 401 response code ▸ Re-authenticate with the login server ▸ Replace the current, failed, request with a new request