Angular Academy · Lektion

Försök igen och laddningsindikatorer

Implementera nya försök och globala laddningsindikatorer.

Lektion 4 av 413 steg

Försök igen och laddningsindikatorer är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Två gemensamma ansvarsområden

Interceptors passar perfekt för två appomfattande beteenden: att automatiskt försöka skicka misslyckade requests igen och att spåra ett globalt laddningstillstånd medan någon request pågår.

Försök igen med retry

Pipe:a retry efter next(req) för att försöka igen vid tillfälliga fel.

import { retry } from 'rxjs';

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

Försök endast igen med säkra requests

Försök fritt igen med idempotenta metoder (GET, HEAD); var försiktig med att försöka igen med POST/PUT, eftersom det kan orsaka dubbletter. Kontrollera metoden.

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

Försök igen med fördröjning och backoff

Lägg till en fördröjning så att retries inte överbelastar servern, och använd exponentiell backoff för bättre motståndskraft.

import { timer } from 'rxjs';

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

Villkorlig retry

Försök endast igen vid fel som kan åtgärdas genom retry (5xx, nätverk), inte vid 4xx-klientfel som kommer att misslyckas igen.

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

Globalt laddningstillstånd

En laddningstjänst håller reda på antalet aktiva requests så att gränssnittet kan visa en global spinner.

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

Laddningsinterceptor

Öka räknaren när requesten startar och minska den i finalize (vid lyckat resultat eller fel) med hjälp av finalize.

import { finalize } from 'rxjs';

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

Varför finalize

finalize körs vid slutförande, fel ELLER avprenumeration, vilket garanterar att laddningsräknaren alltid minskas – ingen spinner som fastnar även om requesten misslyckas eller avbryts.

Visa laddningsindikatorn

Bind laddningssignalen i er rotmall.

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

Exkludera bakgrundsbegäranden

Vissa polling- eller förhämtningsbegäranden bör inte aktivera laddningsindikatorn. Använd en anpassad header eller en kontexttoken för att hoppa över dem.

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

Kombinera retry och laddning

Ordna dem så att nya försök sker inom ett enda laddningsintervall: starta laddningen, försök igen internt och slutför en gång. Placera laddningen ytterst så att den omfattar alla försök.

Snabbtest

Testa er förståelse av retry och laddningsindikatorer.

Besvara frågan i den interaktiva lektionen

Sammanfattning: retry- och laddningsindikatorer

Interceptors hanterar retry och global laddning på ett smidigt sätt.

retry med fördröjning och backoff; begränsa det till idempotenta fall eller fall som kan göras om.
Spåra aktiva begäranden i en tjänst; använd finalize för att minska räknaren.
Använd kontexttokens för att hoppa över bakgrundsbegäranden.

Ni har slutfört HttpClient Interceptors.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Försök igen och laddningsindikatorer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Försök igen och laddningsindikatorer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Försök igen och laddningsindikatorer”?

Implementera nya försök och globala laddningsindikatorer. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Försök igen och laddningsindikatorer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy