Angular interceptors and its usage

In programming, sometimes it is much easier to describe a concept in code than express it in words in a natural language. Angular interceptors are such an example.

In the world of Angular, interceptors have been used to pre-process and post-process the HTTP request before sending and after getting a response from the server.

When your application makes a request, interceptors transform it before sending it to the server, and the interceptors can transform the response on its way back before your application sees it.

The interceptor source code is fairly short. This is due to the fact that the interceptors are based on Promises. Promises are responsible for the complicated mechanism of config (before process) and response (after process) transformation orchestration.

They are very similar to the concept of middleware with a framework like Express, except for the frontend. Interceptors can be really useful for features like caching and logging.

Why do we use HTTP Interceptors?

If in your application, you want a common place where you can check for all the request made to server from your application and check all the responses from the server, the best way is to use - Interceptors.

Interceptors can be used in two different phases in the life cycle of an HTTP request to a server, which are:

Before making the request server

This happens before the call is made to the server. It can be used to change the request configuration of an HTTP call. The most common use case for this is to add an Access Token to be sent to the server with each HTTP request so that it can be validated at the server end.

After getting the response from server

This happens once we get a response from the server. It can be used to change the response before it is being passed to the code block from where HTTP call was made. The most common use case for this is to Handle Global Error Handling across the app.

How do Interceptors work?

An interceptor contains the logic of handling a request but to be used with HttpClient it needs to be wrapped into a service that implements HttpHandler interface. And we can implement this service in such a way that will execute an interceptor and pass a reference to the next handler in the chain to this interceptor. This will make it possible for the interceptor to trigger the next handler, which is usually a backend. To do so, each custom handler will hold a reference to the next handler in the chain and pass it to the interceptor alongside the request.

Uses of Interceptors

Interceptors were a great addition in Angular and have many nice use cases. Some are:

For profiling

Because interceptors can process the request and response together, they can do things like time and log an entire HTTP operation. So you can capture the time of the request and of the response and log the outcome with the elapsed time.

For caching

Since interceptors can handle requests by themselves, without forwarding to next.handle(), you can use it for caching requests. This will increase performance since you don’t have to go all the way to the backend when you already have the response cached.

For an authentication

It is just so fundamental for many applications that we have a good authentication system in place. This is one of the most common use cases for interceptors and also for good reason.

For fake backend

A mock or fake backend can be used in development when you do not have a backend yet. You can also use it for code hosted in StackBlitz.

For converting

When the API returns a format, you can use an interceptor to format it the way you like it. This could be converting from XML to JSON or like in this example property names from PascalCase to camelCase. If the backend doesn’t care about JSON/JS conventions you can use an interceptor to rename all the property names to camelCase.

Implementation of the Interceptors in Angular

• At first, need to import the HttpClientModule into the application in the app.

• Then need to add a Class decorated with Injector Decorator, where you will write the logic for Interceptors.

• Then you need to provide information to angular to use your class from the 2nd step as interceptors.