rxMethod für asynchrone Aufgaben
Asynchrone Abläufe mit rxMethod verarbeiten
rxMethod für asynchrone Aufgaben ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Asynchrone Abläufe in SignalStore
Viele Actions sind asynchron: Daten laden, verzögerte Suche und Polling. SignalStore bietet rxMethod, um diese reaktiven und abbrechbaren asynchronen Abläufe zu verwalten.
Grundlagen von rxMethod
rxMethod erstellt eine Methode, die von einer RxJS-Pipeline unterstützt wird. Sie rufen sie mit einem Wert (oder einem Signal/Observable) auf, der in den Datenstrom eingespeist wird.
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 }))
))
}))rxMethod aufrufen
Rufen Sie die Methode wie eine normale Methode mit einem einfachen Wert auf. Der Wert gelangt in die von Ihnen definierte Pipeline.
store.load('42');Ein Signal übergeben
Sie können ein Signal an eine rxMethod übergeben. Die Pipeline wird automatisch erneut ausgeführt, sobald sich dieses Signal ändert – ideal für reaktive Ladevorgänge.
selectedId = signal('1');
ngOnInit() {
this.store.load(this.selectedId); // reloads when selectedId changes
}switchMap bricht veraltete Vorgänge ab
Mit switchMap bricht eine neue Ausgabe die zuvor laufende Anfrage ab. Dadurch werden Race Conditions vermieden, bei denen eine alte, langsame Antwort eine neuere überschreibt.
Ladezustand verfolgen
Setzen Sie zu Beginn ein Lade-Flag und löschen Sie es nach Abschluss, damit die Benutzeroberfläche Ladeindikatoren anzeigen kann.
load: rxMethod<string>(pipe(
tap(() => patchState(store, { loading: true })),
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, loading: false }))
))
))Fehlerbehandlung
Fehler müssen innerhalb der Pipeline behandelt werden. Andernfalls wird der Datenstrom beendet und die Methode funktioniert nicht mehr. Verwenden Sie catchError innerhalb des inneren Observables.
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;
})
))Verzögerte Suche
Kombinieren Sie zeitbasierte Operatoren für eine Suche während der Eingabe. Die Pipeline verzögert Eingaben und wechselt ebenso wie bei einfachem RxJS.
search: rxMethod<string>(pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => api.search(q)),
tap(results => patchState(store, { results }))
))Den Flattening-Operator auswählen
Verwenden Sie switchMap, um veraltete Vorgänge abzubrechen, concatMap zum Einreihen, mergeMap für parallele Verarbeitung und exhaustMap, um neue Aufrufe während der Verarbeitung zu ignorieren. Wählen Sie den Operator anhand der gewünschten Nebenläufigkeit.
Automatische Bereinigung
Das Abonnement der Pipeline ist an den Lifecycle des Stores gebunden. Wenn der Store zerstört wird (bei einem komponentenbezogenen Store), wird der Datenstrom beendet. So entstehen keine Leaks und es ist kein manuelles Unsubscribe erforderlich.
Beim Erstellen initialisieren
Kombinieren Sie rxMethod mit dem Feature withHooks, um beim Erstellen des Stores einen initialen Ladevorgang auszulösen.
withHooks({
onInit(store) { store.load('initial'); }
})Kurze Überprüfung
Überprüfen Sie Ihr Wissen zu rxMethod.
Zusammenfassung
Sie haben rxMethod für asynchrone Abläufe verwendet: Sie rufen die Methode mit Werten oder Signals auf, wählen einen Flattening-Operator (switchMap zum Abbrechen veralteter Vorgänge), verfolgen den Ladezustand, behandeln Fehler mit catchError und verlassen sich auf die automatische Bereinigung von Abonnements.
Häufig gestellte Fragen
Ist die Lektion „rxMethod für asynchrone Aufgaben“ kostenlos?
Ja — der vollständige Text von „rxMethod für asynchrone Aufgaben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „rxMethod für asynchrone Aufgaben“?
Asynchrone Abläufe mit rxMethod verarbeiten Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „rxMethod für asynchrone Aufgaben“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Einen SignalStore erstellen
- Computed und Methoden
- rxMethod für asynchrone Aufgaben
- Entities und benutzerdefinierte Features