HTTP Interceptors in Angular

Published On: 18 November 2022.By Shweta tiwari.

General

HTTP Interceptors in Angular

Introduction
Angular framework makes HTTP calls to the server for retrieving data to update pages with dynamic information using its HttpClient library.

However, Sometimes we might need to add a few more dynamic parameters to such HTTP API calls before they’re passed onto the remote API services or read something from the response before it is forwarded to the calling services.

In such cases, its not a good practice to replicate the same logic in all the methods of the service. Instead, we can encapsulate this functionality inside a utility and attach this so as to monitor all outgoing requests or incoming responses and do something. These components are called as Interceptors.

What is an Angular HTTP Interceptor?
HTTP Interceptors is a special type of angular service that allows you to intercept the outgoing and incoming HTTP request handle using HttpClient service.

It is used to change HTTP header and body when the request goes out and modify the response and handle the HTTP error when the response comes in.

How To Create An Interceptor?
Angular CLI provides following command to create the interceptor service class:

ng generate interceptor <<Name of the Class>>

1	ng generate interceptor <<Name of the Class>>

The above command will generate following empty class:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LoaderInterceptorService implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request);
  }
}

import { Injectable } from '@angular/core';

import {

HttpRequest,

HttpHandler,

HttpEvent,

HttpInterceptor

} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()

export class LoaderInterceptorService implements HttpInterceptor {

constructor() {}

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

return next.handle(request);

}

As you can see above, an Loader interceptor service is created and it implements HttpInterceptor interface.
To modify the request/response, you need to write your custom code inside the intercept method.
This method receives the HTTP request sent by your application and executes the chain of calls. When there is no custom code for transformations then you need to pass request through next.handle(request).

Interceptor registration

To use the same instance of HttpInterceptor for the entire app, register the interceptors to the AppModule class inside the provider’s array.

providers: [
  {
    provide: HTTP_INTERCEPTORS, 
    useClass:LoaderInterceptorService, 
    multi:true
  }
]

providers: [

{

provide: HTTP_INTERCEPTORS,

useClass:LoaderInterceptorService,

multi:true

}

]

This interceptor will execute for every HTTP request of a client.

Use Cases of HTTP Interceptor

Modify HTTP headers
Modifying the request body
Set authentication/authorization token
Modify the HTTP response
Error handling
Code optimization
Loaders
Profiling

A Loader sync example of HTTP Interceptor

While making HTTP calls to the server for retrieving data to update pages with dynamic information, we use visual elements called loaders, to let the user know about the process taking place.

However, when it comes to multiple API calls at the same time, how can we show the continuous loader till all the API calls are completed?

Using the interceptor, we can show and remove loader for all the API calls at one place instead of writing the code on all the API calls.

To implement this, we create an loader interceptor service as shown below:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { finalize, Observable } from 'rxjs';
import { LoaderService } from '../loader.service';

@Injectable({
  providedIn: 'root'
})
export class LoaderInterceptorService implements HttpInterceptor{

  activeRequestCount =0;

  constructor(private loaderService:LoaderService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if(this.activeRequestCount === 0){
      this.loaderService.showSpinner(true)
    } 
    this.activeRequestCount++;
    return next.handle(req).pipe(
      finalize(()=>{
        this.stopLoader();
      })
    );
  }
  stopLoader(){
    this.activeRequestCount--;
    if(this.activeRequestCount===0){
      this.loaderService.showSpinner(false)

    }
  }
}

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';

import { Injectable } from '@angular/core';

import { finalize, Observable } from 'rxjs';

import { LoaderService } from '../loader.service';

@Injectable({

providedIn: 'root'

})

export class LoaderInterceptorService implements HttpInterceptor{

activeRequestCount =0;

constructor(private loaderService:LoaderService) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

if(this.activeRequestCount === 0){

this.loaderService.showSpinner(true)

}

this.activeRequestCount++;

return next.handle(req).pipe(

finalize(()=>{

this.stopLoader();

})

);

}

stopLoader(){

this.activeRequestCount--;

if(this.activeRequestCount===0){

this.loaderService.showSpinner(false)

}

Activate the loader while calling APIs and count the number of requests. When an API call is completed, decrement the count.
So at any point in time count will be the number of active API calls.
And when count becomes zero stop the loader sign. Here, LoaderService is used to trigger loading spinner.

Conclusion:

In this blog, we have learnt as how to intercept HTTP request & response using the new HttpClientModule and handle them at the same place.

With interceptors, we just need to write the code only inside the interceptor file instead of writing the code for every API.