Angular Academy · Lezione

Retry e indicatori di caricamento

Implementare i retry e gli spinner globali

Retry e indicatori di caricamento è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Due aspetti trasversali

Gli interceptor sono perfetti per due comportamenti dell'intera app: riprovare automaticamente le richieste non riuscite e tenere traccia dello stato di caricamento globale mentre è in corso una qualsiasi richiesta.

Riprovare con retry

Applichi retry dopo next(req) per ripetere i tentativi in caso di errori temporanei.

import { retry } from 'rxjs';

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

Riprovare solo le richieste sicure

Ripeta liberamente i metodi idempotenti (GET, HEAD); presti attenzione a riprovare POST/PUT, che possono causare duplicati. Usi il metodo per applicare questa condizione.

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

Retry con ritardo e backoff

Aggiunga un ritardo affinché i retry non sovraccarichino il server, usando un backoff esponenziale per aumentare la resilienza.

import { timer } from 'rxjs';

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

Retry condizionale

Ripeta i tentativi solo per gli errori ripetibili (5xx, rete), non per gli errori client 4xx, che si verificherebbero di nuovo.

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

Stato di caricamento globale

Un servizio di caricamento tiene traccia del numero di richieste attive, così l'interfaccia può mostrare uno spinner globale.

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 di caricamento

Incrementi il contatore all'avvio della richiesta e lo decrementi in finalize (in caso di successo o errore) usando finalize.

import { finalize } from 'rxjs';

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

Perché usare finalize

finalize viene eseguito al completamento, in caso di errore o di annullamento della sottoscrizione, garantendo sempre il decremento del contatore di caricamento: non rimane alcuno spinner bloccato, neppure se la richiesta fallisce o viene annullata.

Visualizzazione dello spinner

Colleghi il segnale di caricamento nel template radice.

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

Esclusione delle richieste in background

Alcune richieste di polling o prefetch non devono attivare lo spinner. Utilizzi un'intestazione personalizzata o un token di contesto per escluderle.

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

Combinazione di retry e caricamento

Li ordini in modo che i retry avvengano all'interno di un unico intervallo di caricamento: avvii il caricamento, esegua internamente i retry e finalizzi una sola volta. Posizioni il caricamento all'esterno, in modo che includa tutti i tentativi.

Verifica rapida

Verifichi la Sua comprensione degli indicatori di retry e caricamento.

Riepilogo: indicatori di retry e caricamento

Gli interceptor gestiscono in modo ordinato i retry e il caricamento globale.

retry con ritardo/backoff; lo limiti ai casi idempotenti o per cui il retry è appropriato.
Tenga traccia delle richieste attive in un service; utilizzi finalize per decrementare il conteggio.
Utilizzi token di contesto per escludere le richieste in background.

Ha completato HttpClient Interceptors.

Domande Frequenti

La lezione «Retry e indicatori di caricamento» è gratuita?

Sì — il testo completo di «Retry e indicatori di caricamento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Retry e indicatori di caricamento»?

Implementare i retry e gli spinner globali Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Retry e indicatori di caricamento»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy