Interceptors — An Important feature of Http Client

3 min readFeb 4, 2019

What are Interceptors?

Interceptors will check each and every incoming and outgoing request to the server and it is also able to manipulate them before actually sending them to server.

say for example imagine the use case where we need to send user authentication token each and every time with the http request we are sending to server, so instead of writing/fetching token in every request we can simply create the Interceptors, which will inspect our http request, manipulate it (add auth token) and then actually pass it to server.

another use case, say for example we need to pass headers with each and every http request, so instead of passing it to every request we can create interceptors, so it can inspect our request, manipulate it with headers and pass it to the server.

In the same way interceptors can also be used when we receive the data from server, so before passing the actual data to its component, interceptor can also used to manipulate the data.

Without interceptors, we would have to implement all the tasks explicitly for each Http Client Method.

Intercepting Request

Creating Interceptor is very simple; just declare a class that implements the intercept () method of the HttpInterceptor Interface, which can be imported from @angular/common/http. Below is the code snippet of newly created Interceptor.

Intercept method will take 2 arguments,

· HttpRequest

· HttpHandler

HttpRequest:

It is the actual request which we are making through over services or component, this requests are always immutable so it can’t not edited directly,

req.url = req.url.replace(‘http://', ‘https://'); this will not work directly because it is readonly.

To make it work, we first need to clone the request and then we can do changes on cloned request only. Below is the code snippet for cloned request in which I am changing url by interceptors.

HttpHandler:

In most of the case Interceptors will call,

next.handle(httprequest-object);

Which will, call next handler in the chain or eventually the backend handler. An interceptor will skip calling next.handle() and can also return its own Observable.

By only just defining interceptors will do nothing. In order to make interceptor work, we must need to provide the interceptors in app.module.ts file as shown below,

Providing Interceptors

Note: By providing Multi: true, means we can allow multiple interceptors.

So now to check out interceptor is working or not, I will make and http request through my app.component.ts , which in turns call to our task.service.ts ,which will call interceptorclass. Below is the code snippet of app.component.ts and task.service.ts files respectively,

Task.service.ts

So as you can see from above code snippet we are making call to http:// , but this call will through our interceptors which will eventually replace http:// with https://