Http Interceptors
There are many built in tools provided by angular to help scale out large JavaScript applications. Interceptors are one of the built-in tools for specially used for handling HTTP requests at a global application level. Interceptor is nothing but the angular service which is used to intercepts and handle the http request and http response. Interceptors allow us to intercept incoming or outgoing HTTP requests using the HttpClient. we can modify or change the value of the request , by intercepting the HTTP request.
Here we will see the different types of Interceptor implementation.
- Handling HTTP Headers
- HTTP Response Formatting
- HTTP Error Handling
Before moving into above types lets have some basic idea about interceptor.
In the above diagram you can see we have created one interceptor DemoInterceptor. To create an Interceptor, we need to implement the HttpInterceptor interface from @angular/common/http package. Whenever our application makes an HTTP request using the HttpClient service, the Interceptor calls the intercept() method. In incercept() method angular passes a reference to the httpRequest object. With this request, we can inspect it and modify it as necessary. Once our logic is complete, we call next.handle and return the updated request onto the application. Within an application there can be multiple intercepters run for this need to register it as a multi-provider.you must register the provider to the app.module for it to properly apply to all application HTTP requests. Interceptors will only intercept requests that are made using the HttpClient service.
Now lets have a look into 1st implementation of Interceptors –
- Handling HTTP Headers : Let’s assume one usecase where we want to send token id in each api request. So whenever any api call will go to server , everytime this token id will attach in request header. Lets see below code –
Now with each request, we automatically send our Token Id without having to duplicate the logic throughout our application.
- HTTP Response Formatting: Using Interceptors, we can format the data and clean it up before it gets to our application logic. Let’s take a look at an example API response.
It is the nested data , now let’s cleanup it using interceptor.
With the httpRequest object, we can inspect the URL of the request and determine if it is a request we want to ignore or modify. If the request is to the format API endpoint, then we continue and update the response. We also only want to modify the request if the request was a response coming back from our API.
- HTTP Error Handling: We can also handle the api errors using intercepter. We could log errors through the Interceptors or show UI notifications when something has gone wrong. Here we will just retry the api call if it is failed.
In our request handler, we can use the RxJS retry(), operator. The retry operator allows us to retry failed Observable streams that have thrown errors. Angular’s HTTP service uses Observables which allow us to re-request our HTTP call. The retry operator takes a parameter of the number of retries we would like. In our example, we use a parameter of 2, which totals to three attempts, the first attempt plus two additional retries. If none of the requests succeed, then, the Observable throws an error to the subscriber of the HTTP request Observable.
So these are all about the interceptors.
