Interceptors and Error Handling

Welcome to the lesson on Interceptors and Error Handling in Angular! 🎉 In this lesson, we'll explore how interceptors can be used to manage HTTP requests and responses effectively. Interceptors play a crucial role in Angular applications by allowing you to modify requests and handle errors in a centralized manner. By the end of this lesson, you'll be equipped to create an interceptor that adds an authorization header to requests and handles errors gracefully.

Interceptors in Angular are a powerful feature that allows you to intercept and modify HTTP requests and responses. They act as middleware, enabling you to perform actions such as adding headers, logging requests, or handling errors before the request reaches the server or the response reaches the client. The primary benefit of using interceptors is the ability to centralize these modifications, leading to cleaner and more maintainable code.

Let's start by creating a basic interceptor. An interceptor in Angular is defined using the HttpInterceptorFn type. This function takes a request and a next handler as parameters.

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    headers: req.headers.set('Authorization', 'Bearer token')
  });
  return next(authReq);
};

In this example, we define an authInterceptor function that uses the HttpInterceptorFn type. The function takes an HttpRequest and a next handler as parameters. We clone the request and add an Authorization header with a token. The modified request is then passed to the next handler in the chain using next(authReq).

Interceptors can also be used to handle errors globally. This is particularly useful for providing consistent error management across your application. Let's see how we can implement error handling using RxJS operators.

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    headers: req.headers.set('Authorization', 'Bearer token')
  });
  return next(authReq).pipe(
    catchError(error => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

In this code snippet, we use the catchError operator from RxJS to catch any errors that occur during the HTTP request. If an error is caught, we log it to the console and rethrow it using throwError. This allows us to handle errors consistently and provide feedback to users, such as displaying error messages.