Angular Academy · Lekcja

rxMethod do pracy asynchronicznej

Obsługiwać przepływy asynchroniczne za pomocą rxMethod

rxMethod do pracy asynchronicznej to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 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.

Asynchroniczność w SignalStore

Wiele akcji jest asynchronicznych: ładowanie danych, wyszukiwanie z opóźnieniem czy odpytywanie. SignalStore udostępnia rxMethod do zarządzania tymi reaktywnymi i anulowalnymi przepływami asynchronicznymi.

Podstawy rxMethod

rxMethod tworzy metodę opartą na potoku RxJS. Wywołują ją Państwo z wartością (albo sygnałem/obserwowalnym), a wartość trafia do strumienia.

import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';

withMethods((store, api = inject(Api)) => ({
  load: rxMethod<string>(pipe(
    switchMap(id => api.getById(id)),
    tap(item => patchState(store, { current: item }))
  ))
}))

Wywoływanie rxMethod

Należy wywołać ją jak zwykłą metodę, przekazując prostą wartość. Wartość trafia do zdefiniowanego potoku.

store.load('42');

Przekazywanie sygnału

Do rxMethod można przekazać signal. Potok zostanie automatycznie uruchomiony ponownie za każdym razem, gdy sygnał się zmieni, co doskonale sprawdza się przy reaktywnym ładowaniu danych.

selectedId = signal('1');
ngOnInit() {
  this.store.load(this.selectedId); // reloads when selectedId changes
}

switchMap anuluje nieaktualne operacje

Użycie switchMap oznacza, że nowa emisja anuluje poprzednie trwające żądanie. Zapobiega to sytuacjom wyścigu, w których stara, wolna odpowiedź nadpisuje nowszą.

Śledzenie stanu ładowania

Należy ustawić flagę ładowania na początku i wyzerować ją po zakończeniu, aby interfejs mógł wyświetlać wskaźniki ładowania.

load: rxMethod<string>(pipe(
  tap(() => patchState(store, { loading: true })),
  switchMap(id => api.getById(id).pipe(
    tap(item => patchState(store, { current: item, loading: false }))
  ))
))

Obsługa błędów

Błędy muszą być obsługiwane wewnątrz potoku. W przeciwnym razie strumień zostanie zakończony, a metoda przestanie działać. Należy użyć catchError wewnątrz wewnętrznego Observable.

switchMap(id => api.getById(id).pipe(
  tap(item => patchState(store, { current: item, error: null })),
  catchError(err => {
    patchState(store, { error: err.message, loading: false });
    return EMPTY;
  })
))

Wyszukiwanie z opóźnieniem

Operatory zależne od czasu można komponować na potrzeby wyszukiwania podczas wpisywania. Potok opóźnia wyszukiwanie i przełącza się tak samo jak zwykły RxJS.

search: rxMethod<string>(pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(q => api.search(q)),
  tap(results => patchState(store, { results }))
))

Wybór operatora spłaszczającego

Użyj switchMap, aby anulować nieaktualne operacje, concatMap, aby je kolejkować, mergeMap, aby wykonywać je równolegle, oraz exhaustMap, aby ignorować nowe wywołania podczas trwania operacji. Wybór zależy od oczekiwanej współbieżności.

Automatyczne czyszczenie

Subskrypcja potoku jest powiązana z cyklem życia sklepu. Po zniszczeniu sklepu (o zakresie komponentu) strumień jest usuwany, więc nie występują wycieki i nie trzeba ręcznie wywoływać unsubscribe.

Inicjalizacja przy tworzeniu

Połącz rxMethod z funkcją withHooks, aby uruchomić początkowe ładowanie podczas tworzenia sklepu.

withHooks({
  onInit(store) { store.load('initial'); }
})

Szybki test

Sprawdź swoją wiedzę o rxMethod.

Podsumowanie

Użyli Państwo rxMethod do obsługi przepływów asynchronicznych: wywoływali je z wartościami lub sygnałami, wybierali operator spłaszczający (switchMap do anulowania nieaktualnych operacji), śledzili ładowanie, obsługiwali błędy za pomocą catchError i korzystali z automatycznego czyszczenia subskrypcji.

Często zadawane pytania

Czy lekcja „rxMethod do pracy asynchronicznej” jest bezpłatna?

Tak — pełny tekst „rxMethod do pracy asynchronicznej” 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 „rxMethod do pracy asynchronicznej”?

Obsługiwać przepływy asynchroniczne za pomocą rxMethod Ć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 3 z 4.

Ile czasu zajmuje lekcja „rxMethod do pracy asynchronicznej”?

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