Creación de un Interceptor HTTP en Angular con @Injectable

En Angular, los interceptores HTTP son una manera eficaz de manejar las solicitudes HTTP. Permiten modificar las solicitudes y respuestas HTTP antes de que sean enviadas o después de que son recibidas, ofreciendo una gran capacidad de personalización y control.

Para crear un nuevo interceptor HTTP en Angular, se utiliza el decorador @Injectable. Un decorador es una función especial que se adjunta a una declaración de clase, método, propiedad o parámetro, y puede modificar su comportamiento.

Vamos a ver un ejemplo sencillo de cómo implementar esto:

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

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // Manipulación de la solicitud HTTP
        return next.handle(req);
    }
}

En el código brindado, hemos creado una nueva clase MyHttpInterceptor que implementa la interface HttpInterceptor. Dentro de la clase, definimos un método intercept() que toma una solicitud HTTP y un manejador HTTP como argumentos. Este método es donde puedes manipular la solicitud HTTP antes de que sea enviada.

El decorador @Injectable que se utiliza aquí indica que esta clase puede ser usada con el sistema de inyección de dependencias de Angular. Sin este decorador, no seríamos capaces de inyectar nuestra clase interceptor en otros componentes y servicios de Angular.

Aunque existen otros decoradores en Angular como @NgModule y @Component, ellos cumplen funciones distintas. @NgModule se usa para definir un módulo que encapsula componentes, directivas y servicios relacionados, mientras que @Component se utiliza para definir un componente Angular.

Es importante recordar que debes registrar tu interceptor en tu módulo de aplicación para que funcione correctamente. Esto se hace proporcionando tu clase interceptor en el array de proveedores en el método NgModule().