Angular Academy · Lekcja

Ponawianie prób i wskaźniki ładowania

Implementować ponawianie prób i globalne wskaźniki ładowania

Ponawianie prób i wskaźniki ładowania 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.

Dwa przekrojowe mechanizmy

Interceptory idealnie nadają się do obsługi dwóch zachowań obejmujących całą aplikację: automatycznego ponawiania nieudanych żądań oraz śledzenia globalnego stanu ładowania, gdy dowolne żądanie jest w toku.

Ponawianie za pomocą retry

Operator retry należy zastosować po next(req), aby ponawiać próby w przypadku przejściowych błędów.

import { retry } from 'rxjs';

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

Ponawianie tylko bezpiecznych żądań

Metody idempotentne (GET, HEAD) można swobodnie ponawiać; przy ponawianiu POST/PUT należy zachować ostrożność, ponieważ może to powodować duplikaty. Należy sprawdzać metodę żądania.

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

Ponawianie z opóźnieniem i backoffem

Należy dodać opóźnienie, aby ponowienia nie przeciążały serwera, oraz zastosować wykładniczy backoff zwiększający odporność rozwiązania.

import { timer } from 'rxjs';

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

Warunkowe ponawianie

Należy ponawiać żądania tylko po błędach, które można ponowić (5xx, błędy sieci), a nie po błędach klienta 4xx, które wystąpią ponownie.

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

Globalny stan ładowania

Usługa ładowania śledzi liczbę aktywnych żądań, aby interfejs użytkownika mógł wyświetlać globalny 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)); }
}

Interceptor ładowania

Należy zwiększać licznik przy rozpoczęciu żądania, a zmniejszać go w finalize (po pomyślnym zakończeniu lub błędzie), korzystając z finalize.

import { finalize } from 'rxjs';

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

Dlaczego finalize

finalize uruchamia się po zakończeniu, błędzie LUB anulowaniu subskrypcji, gwarantując zmniejszenie licznika ładowania — spinner nie pozostanie aktywny nawet wtedy, gdy żądanie się nie powiedzie lub zostanie anulowane.

Wyświetlanie wskaźnika ładowania

Powiąż sygnał ładowania w głównym szablonie aplikacji.

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

Wykluczanie żądań wykonywanych w tle

Niektóre żądania związane z odpytywaniem lub wstępnym pobieraniem danych nie powinny uruchamiać wskaźnika ładowania. Należy użyć niestandardowego nagłówka lub tokenu kontekstu, aby je pominąć.

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

Łączenie retry i ładowania

Należy uporządkować je tak, aby ponowienia odbywały się w ramach jednego okresu ładowania: rozpocząć ładowanie, wewnętrznie wykonać retry i jednokrotnie zastosować finalize. Ładowanie należy umieścić na zewnętrznym poziomie, aby obejmowało wszystkie próby.

Szybki test

Proszę sprawdzić swoją wiedzę na temat ponawiania prób i wskaźników ładowania.

Podsumowanie: retry i wskaźniki ładowania

Interceptory sprawnie obsługują ponawianie prób i globalny stan ładowania.

retry z opóźnieniem lub mechanizmem backoff; należy ograniczyć je do przypadków idempotentnych albo kwalifikujących się do ponowienia.
Aktywne żądania należy śledzić w serwisie, a za pomocą finalize zmniejszać ich licznik.
Należy używać tokenów kontekstu do pomijania żądań wykonywanych w tle.

Ukończyli Państwo lekcję Interceptory HttpClient.

Często zadawane pytania

Czy lekcja „Ponawianie prób i wskaźniki ładowania” jest bezpłatna?

Tak — pełny tekst „Ponawianie prób i wskaźniki ładowania” 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 „Ponawianie prób i wskaźniki ładowania”?

Implementować ponawianie prób i globalne wskaźniki ładowania Ć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 „Ponawianie prób i wskaźniki ładowania”?

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