Angular Interceptors: Beginner’s Guide

Introduction:

Angular interceptors provide a powerful mechanism to intercept and manipulate HTTP requests and responses in Angular applications. They allow you to add custom logic before sending requests, modify outgoing requests, and handle responses globally. In this blog post, we will explore the basics of Angular interceptors, their implementation, and how they can be used to enhance your HTTP interactions with examples.

If you want to learn about a new feature of angular, you can refer here.inter

Understanding Angular Interceptors:

1. What are Interceptors?

Angular interceptors are classes that can intercept and modify HTTP requests and responses at various stages of the request/response lifecycle. They act as middleware, sitting between the application and the server, providing a way to modify requests or responses, add headers, handle errors, and more.

2. Key Features of Interceptors:

a. Request Manipulation: Interceptors allow you to modify outgoing requests by adding headers, appending data, or transforming the request body.

b. Response Manipulation: Interceptors can transform and modify the response data before it reaches the application, enabling global data manipulation.

c. Error Handling: Interceptors can handle errors that occur during HTTP requests and responses, providing a centralized error handling mechanism.

d. Authentication and Authorization: Interceptors can be used to add authentication tokens or authorization headers to requests, simplifying the process of securing API calls.

Implementing Interceptors:

1. Creating an Interceptor:

To create an interceptor, you need to implement the HttpInterceptor interface provided by Angular. This interface requires implementing the intercept method, where you can add your custom logic.

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

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Custom logic here
    return next.handle(request);
  }
}

2. Registering the Interceptor:

To make your interceptor active, you need to register it in the Angular module’s providers array.

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './my-interceptor';

@NgModule({
  // ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MyInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}

Using Interceptors:

1. Handling Requests:

Interceptors can be used to modify outgoing requests, add headers, or handle requests before they are sent to the server. For example, you can add an authorization header to every request:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const authToken = 'your-auth-token';
  const modifiedRequest = request.clone({ setHeaders: { Authorization: authToken } });
  return next.handle(modifiedRequest);
}

2. Handling Responses:

Interceptors can also modify response data before it reaches the application. For instance, you can intercept responses and transform the data:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request).pipe(
    map((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // Modify response data
        const modifiedResponse = event.clone({ body: transformData(event.body) });
        return modifiedResponse;
      }
      return event;
    })
  );
}

Error Handling:

1. Handling Errors:

Interceptors can handle errors that occur during HTTP requests and responses. You can intercept and handle specific error codes or apply generic error-handling logic

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request).pipe(
    catchError((error: HttpErrorResponse) => {
      // Handle specific errors or apply generic error handling
      return throwError(error);
    })
  );
}

2. Error Notification:

Interceptors can also notify the user or log errors when they occur. For example, you can display an error message to the user or log the error in the console.

Conclusion:

Angular interceptors provide a powerful mechanism to intercept and manipulate HTTP requests and responses. In this blog post, we explored the basics of Angular interceptors and learned how to create and use them effectively. By utilizing interceptors, you can add custom logic, modify requests and responses, handle errors, and enhance the overall HTTP interaction in your Angular applications. Interceptors provide a clean and reusable way to centralize and manage these functionalities, resulting in cleaner and more maintainable code.

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.