Angular Academy · Lekcja

Operatory obsługi błędów

Odzyskuj działanie za pomocą catchError i retry.

Operatory obsługi błędów to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Błędy w obserwowalnych

Gdy obserwowalny emituje błąd, kończy działanie: nie emituje już żadnych wartości, a procedura obsługi błędu zostaje uruchomiona. Operatory obsługi błędów pozwalają odzyskać działanie, ponowić próbę lub przekształcić błąd, zamiast przerywać strumień.

Ścieżka błędu

Błędy można obsługiwać w obserwatorze lub za pomocą operatorów. Bez obsługi nieprzechwycony błąd może przerwać subskrypcję.

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

catchError

catchError przechwytuje błąd i zwraca zastępczy obserwowalny, pozwalając strumieniowi kontynuować działanie w kontrolowany sposób.

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

Wybiórcze ponowne zgłaszanie błędów

Wewnątrz catchError można przeanalizować błąd i zdecydować, czy odzyskać działanie, czy zgłosić błąd ponownie za pomocą throwError.

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

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

retry

retry(n) ponownie subskrybuje źródło maksymalnie n razy po wystąpieniu błędu — przydaje się w przypadku przejściowych awarii sieci.

import { retry } from 'rxjs';

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

retry z konfiguracją

Forma obiektowa dodaje opóźnienie między próbami (i obsługuje funkcję narastającego opóźnienia), dzięki czemu serwer nie jest przeciążany żądaniami.

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

Narastające opóźnienie w stylu retryWhen

W przypadku wykładniczego narastania opóźnienia opcja delay może przyjmować funkcję zwracającą obserwowalny, który przy każdej próbie opóźnia działanie coraz bardziej.

import { timer } from 'rxjs';

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

catchError po retry

Można połączyć oba operatory: ponawiać próby po przejściowych awariach, a następnie kontrolowanie obsłużyć sytuację po wyczerpaniu prób.

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

Położenie ma znaczenie

Położenie catchError w potoku określa zakres jego działania. Umieszczony wewnątrz switchMap przechwytuje błędy poszczególnych żądań wewnętrznych, pozostawiając zewnętrzny strumień aktywny; umieszczony na końcu przechwytuje wszystkie błędy.

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

EMPTY jako cichy mechanizm zastępczy

Zwrócenie EMPTY z catchError kończy strumień bez emitowania wartości — przydaje się, gdy chcą Państwo pominąć błąd i niczego nie emitować.

import { EMPTY, catchError } from 'rxjs';

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

finalize do sprzątania

finalize uruchamia funkcję zwrotną, gdy strumień kończy się z dowolnego powodu — po ukończeniu, wystąpieniu błędu lub anulowaniu subskrypcji. W połączeniu z obsługą błędów pozwala zawsze zresetować stan ładowania.

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

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

Szybki test

Sprawdź swoją wiedzę na temat obsługi błędów.

Podsumowanie: operatory obsługi błędów

Błędy kończą działanie strumienia, chyba że zostaną obsłużone.

catchError: odzyskuje działanie, zwracając zastępczy obserwowalny.
retry: ponownie subskrybuje po błędzie, opcjonalnie z opóźnieniem lub narastającym opóźnieniem.
Położenie operatora (wewnątrz switchMap lub na końcu) określa zakres jego działania.

Ukończyli Państwo kurs RxJS Operators in Depth.

Często zadawane pytania

Czy lekcja „Operatory obsługi błędów” jest bezpłatna?

Tak — pełny tekst „Operatory obsługi błędów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Operatory obsługi błędów”?

Odzyskuj działanie za pomocą catchError i retry. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Operatory obsługi błędów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy