Angular Academy · Lektion

Operatorer för felhantering

Återhämta dig med catchError och retry.

Lektion 4 av 413 steg

Operatorer för felhantering ä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.

Fel i observables

När en observable emitterar ett fel avslutas den: inga fler värden emitteras och felhanteraren körs. Feloperatorer låter dig återhämta dig från, försöka igen med eller omvandla fel i stället för att avbryta streamen.

Felvägen

Hantera fel i observern eller med operatorer. Utan felhantering kan ett ohanterat fel avsluta prenumerationen med ett fel.

this.http.get('/api/data').subscribe({
  next: d => console.log(d),
  error: err => console.error('failed', err)
});

catchError

catchError fångar upp ett fel och returnerar en ersättande observable, så att streamen kan fortsätta på ett kontrollerat sätt.

import { catchError, of } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error(err);
    return of([]); // fallback value
  })
).subscribe(data => console.log(data));

Kasta om fel selektivt

Inuti catchError kan du granska felet och välja att återhämta dig eller kasta om det med throwError.

import { catchError, throwError, of } from 'rxjs';

source$.pipe(
  catchError(err =>
    err.status === 404 ? of(null) : throwError(() => err)
  )
).subscribe();

retry

retry(n) prenumererar på källan igen upp till n gånger när den ger ett fel – användbart vid tillfälliga nätverksfel.

import { retry } from 'rxjs';

this.http.get('/api/flaky').pipe(
  retry(2) // try up to 3 times total
).subscribe(d => console.log(d));

retry med konfiguration

Objektformen lägger till en fördröjning mellan försöken och stöder även en backoff-funktion, vilket undviker att överbelasta servern.

this.http.get('/api/flaky').pipe(
  retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));

Backoff i stil med retryWhen

För exponentiell backoff kan alternativet delay vara en funktion som returnerar en observable och successivt fördröjer längre för varje försök.

import { timer } from 'rxjs';

source$.pipe(
  retry({
    delay: (err, count) => timer(count * 1000)
  })
).subscribe();

catchError efter retry

Kombinera dem: försök igen vid tillfälliga fel och använd sedan en kontrollerad reservlösning om alla försök misslyckas.

this.http.get('/api/data').pipe(
  retry({ count: 2, delay: 500 }),
  catchError(() => of([]))
).subscribe(data => console.log(data));

Placeringen spelar roll

Placeringen av catchError i pipen avgör omfattningen. Inuti en switchMap fångar den fel per inre anrop, så att den yttre streamen fortsätter; i slutet fångar den alla fel.

term$.pipe(
  switchMap(t => this.http.get('/api?q=' + t).pipe(
    catchError(() => of([])) // outer stream survives
  ))
).subscribe();

EMPTY som tyst reservlösning

Om du returnerar EMPTY från catchError slutförs streamen utan något värde – användbart när du vill svälja felet och inte emittera något.

import { EMPTY, catchError } from 'rxjs';

source$.pipe(
  catchError(() => EMPTY)
).subscribe();

finalize för städning

finalize kör en callback när streamen avslutas av någon anledning – genom slutförande, fel eller avprenumeration. Kombinera den med felhantering för att alltid återställa laddningsstatusen.

import { finalize, catchError, of } from 'rxjs';

this.loading = true;
source$.pipe(
  catchError(() => of([])),
  finalize(() => this.loading = false)
).subscribe();

Snabbtest

Testa dina kunskaper om felhantering.

Besvara frågan i den interaktiva lektionen

Repetition: operatorer för felhantering

Fel avslutar en stream om de inte hanteras.

catchError: återhämtar sig genom att returnera en ersättande observable.
retry: prenumererar igen vid fel, med valfri fördröjning eller backoff.
Placeringen (inuti switchMap eller i slutet) styr omfattningen.

Du har slutfört RxJS Operators in Depth.

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 ”Operatorer för felhantering” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Operatorer för felhantering”, 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 ”Operatorer för felhantering”?

Återhämta dig med catchError och retry. 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 ”Operatorer för felhantering”?

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