¿Que son los Interceptores en angular?

En el contexto de Angular, los interceptores son una funcionalidad que permite capturar y manipular solicitudes HTTP antes de que sean enviadas al servidor o respuestas HTTP antes de que sean procesadas por la aplicación. Los interceptores actúan como filtros que se ejecutan en el proceso de comunicación entre la aplicación y el servidor, lo que brinda la oportunidad de realizar diversas tareas como la modificación de encabezados, el manejo de errores, el enriquecimiento de datos y mucho más.

Cuando se realiza una solicitud HTTP en Angular, pasa a través de una serie de interceptores en un orden predefinido. Cada interceptor tiene la capacidad de inspeccionar y modificar la solicitud o respuesta antes de pasarla al siguiente interceptor en la cadena. Esto proporciona una forma flexible y poderosa de agregar funcionalidad común a todas las solicitudes o respuestas en una aplicación Angular.

Para crear un interceptor en Angular, se debe implementar la interfaz HttpInterceptor y proporcionar la lógica personalizada en los métodos correspondientes. Los métodos principales son intercept y opcionalmente handleError. El método intercept se invoca antes de enviar una solicitud HTTP y toma dos argumentos: la solicitud original y un objeto HttpHandler. El interceptor puede realizar acciones en la solicitud, como agregar encabezados, modificar la URL, cambiar el cuerpo o realizar cualquier otra manipulación necesaria. Luego, puede pasar la solicitud modificada al HttpHandler para que la envíe al servidor o puede manipular directamente la respuesta si es necesario.

Aquí hay un ejemplo básico de cómo se puede implementar un interceptor en Angular:

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, next: HttpHandler): Observable> {
// Modificar la solicitud aquí (agregar encabezados, modificar URL, etc.)
const modifiedRequest = request.clone({
setHeaders: {
‘Authorization’: ‘Bearer ‘ + authToken
}
});

// Pasar la solicitud modificada al siguiente interceptor o al backend
return next.handle(modifiedRequest);

}
}

Una vez que se ha creado el interceptor, debe registrarse en el módulo de la aplicación o en un módulo específico para que Angular lo reconozca y lo utilice en las solicitudes HTTP. Esto se puede hacer agregando el interceptor al arreglo de proveedores en el módulo correspondiente:

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 { }

En este ejemplo, el interceptor MyInterceptor se registrará como un proveedor de HTTP_INTERCEPTORS, con la configuración multi: true para permitir múltiples interceptores. Si se desean agregar más interceptores, simplemente se deben agregar al arreglo de proveedores en el módulo correspondiente.

En resumen, los interceptores en Angular brindan una forma poderosa de capturar y manipular solicitudes y respuestas HTTP en una aplicación. Permiten agregar funcionalidad común a todas las solicitudes o respuestas, como la manipulación de encabezados, el manejo de errores y mucho más. Al utilizar interceptores, se puede centralizar la lógica de manejo de solicitudes y respuestas en un solo lugar, lo que facilita el mantenimiento y la extensibilidad de la aplicación.