Angular interceptors are a great way to handle and modify HTTP requests and responses across your app. While interceptors are usually implemented as classes, you can use function-based interceptors for simpler and more reusable code.
In this blog, we’ll cover how to create and use function-based interceptors in Angular, with easy-to-follow examples for better clarity and flexibility.
The source code can be downloaded from GitHub.
What is a function-based Interceptor?
A function-based interceptor is a simpler and more flexible option compared to a class-based interceptor. Instead of creating a whole class with an intercept method, you put your logic into individual functions. This approach helps with,
- Separation of Concerns: Smaller, focused functions are easier to test and maintain.
- Reusability: You can reuse the interceptor logic by sharing or combining multiple functions.
Benefits of Function-Based Interceptors
- Less Setup: You only need a function, not an entire class.
- Easier Testing: It’s simpler to test individual functions.
- Flexible: You can combine several functions to handle complex request/response processes.
How to implement a function-based Interceptor?
- Let us create an angular project with the imported HttpClientModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
bootstrap: [AppComponent]
})
export class AppModule { }
Benefits of Using Function-Based Interceptors
- Lightweight: Less extra code to write.
- Modular: Perfect for small tasks like changing headers or logging.
- Future-Proof: Works well with modern Angular features like provideHttpClient.
Conclusion
Function-based interceptors offer a simple, organized, and flexible way to manage HTTP requests and responses in Angular apps. Whether you're adding authorization tokens, logging requests, or handling errors, function interceptors make it easier. Use this approach to keep your code clean and ready for the future.
Give it a try in your project today, and enjoy the simplicity of function-based interceptors!