Implementing HTTP interceptor in Angular2

The interceptors
Currently Angular2 have no implementation (yet) on interceptors. One way to achieve that is by extending Http, XHRBackend, BaseRequestOptions or any of the other involved classes in TypeScript.

What are interceptors?

Angular’s HTTP service allows us to communicate with a backend and make HTTP requests. There are cases where we want to capture every request and manipulate it before sending it to the server. Other times we would like to capture the response and process it before completing the call. Global http error handling can be also a good example of such need.

So, Interceptors are created exactly for such cases.

Let’s see what we wan’t to achieve with out Http Interceptor.

Suppose we are implementing a basic authentication on our backend server. And we want every http request to contain a secret set under Authorisation key. That request should look something like that in below image.

Request Header from modified by Interceptor

Also we would like our service to prefix api url from the environment to these http requests.

Let’s build our Interceptor

First create a service. I’m naming it as HttpInterceptor . We can other inject a NotificationSerivce like in this example.

Out HttpInterceptor Service

Add a http GET method

Let’s add the http GET method, with some request manipulation methods.

Http GET method manipulation

Putting some icing on cake

Some additional methods to handle events like(success, error etc.). The notify service can implement some store dispatching methods in order to show toastr notifications.

helper methods to handle events.

Adding to Main Module

Now that we know how to create an http interceptor. Let’s add it to providers.

If this syntax is new to you, then go through this blog, if you want to know about dependency injection. A useful information from thoughtram.

Implementation

Using it is just like using the http service in our data services.

Data Service using Http interceptor Service

This is how our HttpInterceptor looks like.

Notice the comments before the method implementation. These comments help us to show the method signature, whenever we are using them. So its best practice to add comments before methods.

Ohh !! Too much Code. (Try Ng2-Restangular)

This project is the follow-up of the Restangular. Ng2-Restangular is an Angular 2 service that simplifies common GET, POST, DELETE, and UPDATE requests with a minimum of client code. It’s a perfect fit for any WebApp that consumes data from a RESTful API. Live Demo on Plunkr Hero App


Summary

In this article I explained about Angular interceptors. I also provided useful examples that can help you in your development.

I hope you enjoyed reading this article as much as I enjoyed writing it! 
Good Luck!

Pankaj