Los interceptores angulares son herramientas muy poderosas que los desarrolladores pueden usar para administrar cómo sus aplicaciones manejan las solicitudes y respuestas HTTP. Desempeñan un papel crucial en la implementación de funciones como registro, autenticación, manejo de errores y más, lo que genera un código más claro y fácil de mantener.

Los interceptores angulares actúan como un middleware entre su aplicación Angular y el servidor. Interceptan las solicitudes antes de que se envíen al servidor y las respuestas antes de que lleguen a los componentes de nuestra aplicación. Esto permite a los desarrolladores modificar solicitudes agregando encabezados, modificando cuerpos de solicitud/respuesta y cambiando códigos de estado.

Configurando su proyecto angular

Primero, asegúrese de tener Angular CLI instalado. Si no, puedes instalarlo con npm:

npm install -g @angular/cli

Ahora, crea un nuevo proyecto Angular:

ng new Project_Name
cd Project_Name

Ahora, genere un nuevo interceptor HTTP con Angular CLI:

ng generate interceptor interceptors/interceptorName

Esto creará dos archivos: interceptorName.interceptor.ts y interceptorName.interceptor.spec.ts en el directorio src/app/interceptors.

Ahora, abra interceptorName.interceptor.ts y agregue la lógica para su interceptor. A continuación se muestra un ejemplo que registra un mensaje.

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

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

Ahora, para usar el interceptor, abra app.config.ts y agréguelo a la matriz de proveedores:

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';


export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

Casos de uso avanzado de interceptores angulares

Transformación personalizada de solicitudes y respuestas

Los interceptores pueden personalizar la transformación de datos para solicitudes y respuestas, como modificar los cuerpos de las solicitudes, los encabezados o los formatos de los datos de respuesta antes de que la aplicación los procese.

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

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

Burlarse de escenarios de prueba

Los desarrolladores pueden simular diferentes situaciones del servidor sin depender de servicios backend en vivo mediante el uso de interceptores para simular respuestas HTTP durante las pruebas. Este método permite evaluar adecuadamente varios escenarios.

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

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

Manejo de errores y mecanismos de reintento

Los interceptores angulares mejoran las aplicaciones mediante la implementación de estrategias de manejo de errores, como reintentar automáticamente las solicitudes fallidas y transformar las respuestas de error para mejorar la experiencia del usuario.

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

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

Aquí, el interceptor vuelve a intentar la solicitud fallida hasta tres veces antes de manejar el error, lo que garantiza múltiples intentos para completar con éxito la solicitud.

Encadenamiento de interceptores y control del orden de ejecución

En Angular, los desarrolladores pueden vincular múltiples interceptores, cada uno de los cuales administra diferentes aspectos del procesamiento de solicitudes, como autenticación, registro o manejo de errores. Se ejecutan en el orden en que se registran, lo que permite una modificación precisa de las solicitudes y respuestas, lo que garantiza una gestión flexible de los flujos de trabajo para mejorar la funcionalidad de la aplicación.

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

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};

// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};

// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

// Registering Interceptors in Angular Module

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

Manejo de eventos e interacción DOM

Los interceptores angulares tienen la capacidad de interceptar eventos e interacciones DOM antes de que Angular los procese. Esta funcionalidad permite tareas como registrar las interacciones del usuario, aplicar políticas de manejo de eventos en toda la aplicación o realizar validaciones adicionales antes de la propagación de eventos dentro de la aplicación.

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

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

Intercepción usando herramienta externa

Las herramientas de interceptación HTTP externas pueden ser increíblemente útiles en varios escenarios, especialmente cuando necesita más control sobre sus solicitudes y respuestas HTTP más allá de lo que está disponible en los interceptores integrados. Son particularmente beneficiosos para probar y depurar API, simular diferentes condiciones del servidor y garantizar que su aplicación maneje varios casos extremos de manera efectiva.

Requestly es una de esas herramientas poderosas que mejora su flujo de trabajo de desarrollo. Por ejemplo, supongamos que está desarrollando una aplicación y necesita probar cómo maneja una respuesta lenta de la red.

• Instalación y configuración: instale fácilmente Requestly como una extensión del navegador y configure reglas para interceptar y modificar solicitudes y respuestas HTTP.
• Gestión de reglas: defina y administre conjuntos de reglas basados ​​en URL, encabezados o parámetros de consulta para interceptar solicitudes según criterios específicos.
• Modificación de solicitud: modifique las solicitudes agregando encabezados, reescribiendo URL o redirigiendo solicitudes según reglas predefinidas, lo que facilita escenarios dinámicos de prueba y depuración.
• Casos de uso avanzados: utilice Requestly para simular diferentes respuestas del servidor, simular puntos finales con fines de prueba o aplicar condiciones de red específicas durante el desarrollo.

Conclusión

Los interceptores angulares son herramientas indispensables para gestionar la comunicación HTTP y mejorar la solidez de las aplicaciones Angular. Al dominar los métodos y explorar soluciones externas como Requestly, los desarrolladores pueden optimizar las integraciones de API, mejorar las prácticas de seguridad y optimizar el rendimiento de manera efectiva. Adopte interceptores para elevar la confiabilidad y escalabilidad de sus aplicaciones Angular al manejar diversas interacciones de backend con confianza y eficiencia.