Angular Academy · Lektion

Wiederholungen und Ladeanzeigen

Wiederholungen und globale Ladeindikatoren implementieren

Wiederholungen und Ladeanzeigen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei übergreifende Anliegen

Interceptors eignen sich ideal für zwei anwendungsweite Verhaltensweisen: das automatische Wiederholen fehlgeschlagener Anfragen und das Verfolgen eines globalen Ladezustands, solange eine Anfrage verarbeitet wird.

Mit retry wiederholen

Leiten Sie den Stream nach next(req) durch retry, um vorübergehende Fehler erneut zu versuchen.

import { retry } from 'rxjs';

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

Nur sichere Anfragen wiederholen

Wiederholen Sie idempotente Methoden (GET, HEAD) bedenkenlos. Bei POST/PUT ist Vorsicht geboten, da Duplikate entstehen können. Prüfen Sie dazu die Methode.

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

Mit Verzögerung und Backoff wiederholen

Fügen Sie eine Verzögerung hinzu, damit Wiederholungen den Server nicht überlasten, und verwenden Sie für mehr Robustheit einen exponentiellen Backoff.

import { timer } from 'rxjs';

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

Bedingte Wiederholung

Wiederholen Sie nur bei wiederholbaren Fehlern (5xx, Netzwerkfehler), nicht bei 4xx-Clientfehlern, die erneut auftreten werden.

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

Globaler Ladezustand

Ein Loading-Service verfolgt die Anzahl aktiver Anfragen, damit die UI einen globalen Spinner anzeigen kann.

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)); }
}

Loading-Interceptor

Erhöhen Sie den Zähler beim Start der Anfrage und verringern Sie ihn mit finalize nach deren Abschluss (bei Erfolg oder Fehler).

import { finalize } from 'rxjs';

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

Warum finalize

finalize wird bei Abschluss, Fehler ODER Abmeldung ausgeführt. Dadurch wird der Ladezähler garantiert immer verringert – selbst wenn die Anfrage fehlschlägt oder abgebrochen wird, bleibt kein Spinner hängen.

Ladeindikator anzeigen

Binden Sie das Ladesignal in Ihre Root-Vorlage ein.

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

Hintergrundanfragen ausschließen

Einige Polling- oder Prefetch-Anfragen sollten den Ladeindikator nicht auslösen. Verwenden Sie einen benutzerdefinierten Header oder ein Context-Token, um sie zu überspringen.

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

Retry und Laden kombinieren

Ordnen Sie sie so an, dass Retries innerhalb eines einzigen Ladezeitraums stattfinden: Laden starten, intern wiederholen und genau einmal abschließen. Platzieren Sie das Laden außen, damit es alle Retry-Versuche abdeckt.

Kurze Überprüfung

Testen Sie Ihr Verständnis von Retries und Ladeindikatoren.

Zusammenfassung: Retry- und Ladeindikatoren

Mit Interceptors lassen sich Retries und globales Laden sauber umsetzen.

retry mit Verzögerung und Backoff; beschränken Sie es auf idempotente oder wiederholbare Fälle.
Verfolgen Sie aktive Anfragen in einem Service und verwenden Sie finalize, um den Zähler zu verringern.
Verwenden Sie Context-Tokens, um Hintergrundanfragen zu überspringen.

Sie haben HttpClient Interceptors abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Wiederholungen und Ladeanzeigen“ kostenlos?

Ja — der vollständige Text von „Wiederholungen und Ladeanzeigen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Wiederholungen und Ladeanzeigen“?

Wiederholungen und globale Ladeindikatoren implementieren Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Wiederholungen und Ladeanzeigen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy