Angular Academy · Lección

Reintentos e indicadores de carga

Implementar reintentos e indicadores de carga globales

Reintentos e indicadores de carga es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 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.

Dos aspectos transversales

Los interceptores son perfectos para dos comportamientos de toda la aplicación: reintentar automáticamente las solicitudes fallidas y controlar un estado de carga global mientras haya alguna solicitud en curso.

Reintentar con retry

Encadene retry después de next(req) para volver a intentar los fallos transitorios.

import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(retry(2));

Reintentar solo solicitudes seguras

Reintente libremente los métodos idempotentes (GET, HEAD), pero tenga cuidado al reintentar POST/PUT, ya que pueden provocar duplicados. Compruébelo según el método.

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  return next(req).pipe(retry(2));
};

Reintentar con retraso y backoff

Añada un retraso para que los reintentos no saturen el servidor y use un backoff exponencial para mejorar la resiliencia.

import { timer } from 'rxjs';

next(req).pipe(
  retry({
    count: 3,
    delay: (_err, n) => timer(Math.pow(2, n) * 500)
  })
);

Reintento condicional

Reintente solo los errores que admiten reintentos (5xx y errores de red), no los errores 4xx del cliente, que volverán a fallar.

retry({
  count: 2,
  delay: (err, n) =>
    err.status >= 500 ? timer(n * 500) : throwError(() => err)
})

Estado de carga global

Un servicio de carga realiza un seguimiento del número de solicitudes activas para que la interfaz pueda mostrar un indicador giratorio global.

export class LoadingService {
  private active = signal(0);
  readonly isLoading = computed(() => this.active() > 0);
  start() { this.active.update(n => n + 1); }
  stop()  { this.active.update(n => Math.max(0, n - 1)); }
}

Interceptor de carga

Incremente el contador al iniciar la solicitud y decreméntelo al finalizar, tanto si termina correctamente como si produce un error, mediante finalize.

import { finalize } from 'rxjs';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  loading.start();
  return next(req).pipe(finalize(() => loading.stop()));
};

Por qué usar finalize

finalize se ejecuta al completarse, producirse un error o cancelar la suscripción, lo que garantiza que el contador de carga siempre se decremente; así no quedará ningún indicador giratorio atascado aunque la solicitud falle o se cancele.

Mostrar el spinner

Vincule la señal de carga en su plantilla raíz.

// root component template:
// @if (loading.isLoading()) {
//   <app-spinner />
// }

Excluir solicitudes en segundo plano

Algunas solicitudes de sondeo o precarga no deberían activar el spinner. Use un encabezado personalizado o un token de contexto para omitirlas.

import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);

Combinar reintentos y carga

Ordénelos para que los reintentos ocurran dentro de un único período de carga: inicie la carga, reintente internamente y finalice una sola vez. Coloque la carga en la capa externa para que abarque todos los intentos.

Comprobación rápida

Compruebe su comprensión de los reintentos y los indicadores de carga.

Resumen: indicadores de reintento y carga

Los interceptores gestionan correctamente los reintentos y la carga global.

retry con retraso o backoff; limítelo a casos idempotentes o susceptibles de reintento.
Realice el seguimiento de las solicitudes activas en un servicio; use finalize para decrementar el contador.
Use tokens de contexto para omitir las solicitudes en segundo plano.

Ha completado HttpClient Interceptors.

Preguntas frecuentes

¿La lección «Reintentos e indicadores de carga» es gratis?

Sí — el texto completo de «Reintentos e indicadores de carga» 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 «Reintentos e indicadores de carga»?

Implementar reintentos e indicadores de carga globales 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 4 de 4.

¿Cuánto tiempo toma la lección «Reintentos e indicadores de carga»?

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