Angular Academy · Lección

Interceptores funcionales

Interceptar solicitudes con interceptores funcionales

Interceptores funcionales es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Qué es un interceptor

Un interceptor HTTP se sitúa entre su aplicación y la red. Todas las solicitudes y respuestas pasan por él, de modo que puede añadir encabezados, registrar información, transformar datos, reintentar solicitudes o gestionar errores desde un único lugar central.

HttpInterceptorFn

Angular moderno utiliza interceptores funcionales: una HttpInterceptorFn recibe la solicitud y un controlador next, y devuelve un observable de eventos HTTP.

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

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

Registrarse con withInterceptors

Proporcione los interceptores mediante provideHttpClient(withInterceptors([...])) en la configuración de su aplicación.

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

El controlador next

Llame a next(req) para pasar la solicitud por la cadena. Lo que devuelva se convierte en el flujo de la solicitud; si no llama a next, la solicitud nunca se envía.

Las solicitudes son inmutables

HttpRequest es inmutable. Para modificarla, debe usar clone() con sus cambios y pasar la copia a next.

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

Encadenar varios interceptores

Los interceptores se ejecutan en el orden indicado. Cada uno envuelve al siguiente, por lo que el array forma una canalización: el primero ve la solicitud en primer lugar y la respuesta en último lugar.

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

Usar inject() dentro de interceptores

Los interceptores funcionales se ejecutan en un contexto de inyección, por lo que puede usar inject() directamente para obtener servicios.

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

Inspeccionar la respuesta

Intercepte el flujo devuelto para observar las respuestas, por ejemplo, para medir tiempos o registrar información.

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

Intercepción condicional

Puede evaluar la URL o el método de la solicitud para aplicar la lógica de forma selectiva.

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

Interceptores funcionales frente a interceptores basados en clases

Los interceptores funcionales sustituyen al antiguo HttpInterceptor basado en clases. Son más sencillos, admiten tree-shaking, son fáciles de probar y se registran sin tokens de DI.

Interoperabilidad con interceptores basados en DI

Si debe usar interceptores de clases heredados, withInterceptorsFromDi() permite integrarlos. Para el código nuevo, prefiera los funcionales.

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

Comprobación rápida

Compruebe su comprensión de los interceptores funcionales.

Resumen: interceptores funcionales

Los interceptores centralizan la lógica HTTP transversal.

HttpInterceptorFn: (req, next) => Observable.
Regístrelos con withInterceptors([...]).
Clone las solicitudes para modificarlas y llame a next para continuar.
Use inject() para los servicios.

Siguiente: añadir encabezados de autenticación.

Preguntas frecuentes

¿La lección «Interceptores funcionales» es gratis?

Sí — el texto completo de «Interceptores funcionales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Interceptores funcionales»?

Interceptar solicitudes con interceptores funcionales Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Interceptores funcionales»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy