Function-Based Interceptor in Angular: A Comprehensive Guide

The Code Points March 23, 2025 0

Angular, a popular web application framework, provides a robust way to handle HTTP requests and responses using Interceptors. These interceptors offer a way to modify or manipulate HTTP requests globally in your application. Among the various types of interceptors available, Function-Based Interceptors provide a unique, modular approach that streamlines handling HTTP requests efficiently.

In this article, we’ll explore what function-based interceptors are, how they work, and how you can implement them in Angular to optimize your application’s performance and functionality.

What is a Function-Based Interceptor in Angular?

In Angular, an interceptor is a service that allows you to intercept HTTP requests or responses. By default, Angular's HTTPClient provides interceptors that can be used to modify the request, handle errors, or manage headers. The Function-Based Interceptor is a specialized form where instead of creating a class-based service, developers can directly use functions to intercept and modify HTTP requests.

These function-based interceptors are a more concise and flexible way of modifying HTTP requests. They allow for the reuse of functions across various HTTP requests, simplifying the logic for HTTP handling and boosting modularity.

Why Use Function-Based Interceptors?

Function-Based Interceptors offer several advantages over traditional class-based interceptors:

1. Simplicity: Function-based interceptors require less boilerplate code and can be easier to manage in smaller applications.
2. Reusability: By defining functions for common HTTP operations, you can reuse the same logic across different parts of your application.
3. Modularity: You can organize your HTTP requests and responses more effectively by using isolated functions for distinct concerns, making your codebase cleaner.
4. Performance Optimization: Function-based interceptors provide a lightweight approach to handling HTTP requests, leading to potential performance improvements.

How to Implement Function-Based Interceptors in Angular

To implement a function-based interceptor in Angular, you need to follow these steps:

Step 1: Create a Function-Based Interceptor

A function-based interceptor can be written as a simple function that takes in a request and returns an observable of the modified request.

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

@Injectable()
export class FunctionInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Modify the request as needed
    const clonedRequest = request.clone({
      setHeaders: {
        Authorization: `Bearer your_token_here`,
      },
    });

    // Pass the modified request to the next handler
    return next.handle(clonedRequest);
  }
}

This function-based approach ensures that the interceptor focuses on the logic required for the HTTP requests, leaving out complex class structures.

Step 2: Provide the Interceptor

In Angular, HTTP interceptors need to be added to the HTTP_INTERCEPTORS provider in the app module. Here’s how you can provide a function-based interceptor:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { FunctionInterceptor } from './function.interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: FunctionInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

By registering the interceptor in the providers array, Angular will automatically use this function-based interceptor for all outgoing HTTP requests.

Common Use Cases for Function-Based Interceptors

Function-based interceptors in Angular are used in a variety of scenarios. Some common use cases include:

Authorization Header Injection: Automatically adding a token to the HTTP headers for all API calls.

const clonedRequest = request.clone({
  setHeaders: {
    Authorization: `Bearer ${authToken}`
  }
});

Error Handling: Centralized error handling for HTTP responses, allowing you to catch errors globally and display a user-friendly message.

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

return next.handle(request).pipe(
  catchError((error) => {
    console.error('HTTP Error:', error);
    return throwError(error);
  })
);

Logging Requests: Interceptors can be used to log HTTP request details, making it easier to track and debug issues in the development process.

console.log('HTTP Request:', request);
return next.handle(request);

Caching HTTP Responses: You can also use interceptors to cache HTTP responses for better performance, especially for static data that doesn’t change often.

if (cachedData) {
  return of(cachedData);
} else {
  return next.handle(request);
}

Best Practices for Function-Based Interceptors

1. Avoid Overuse of Interceptors: While interceptors can be powerful, excessive or unnecessary use may make the code harder to maintain. Use them primarily for cross-cutting concerns like authentication and logging.
2. Use Error Handling Globally: Function-based interceptors are ideal for implementing global error handling for API responses. This reduces the need for redundant error handling code across different parts of the application.
3. Limit Logic Inside Interceptors: Keep the interceptor logic simple and focused on what it is designed for—modifying requests or responses. Complex business logic should be handled elsewhere.
4. Order of Interceptors: If you have multiple interceptors, keep in mind that the order in which they are applied is important. Ensure that they are applied in a sequence that makes sense for your application’s needs.

Conclusion

Function-based interceptors in Angular offer a simpler and more efficient way to handle HTTP requests and responses. By using function-based interceptors, developers can modularize and streamline their HTTP logic, leading to better performance and maintainability in Angular applications. Whether you’re adding authorization headers, logging requests, or handling errors globally, function-based interceptors provide a clean and effective solution for managing HTTP traffic in your Angular apps.

If you're building an Angular application and want to optimize your HTTP handling, adopting function-based interceptors is definitely a step in the right direction.