javascript / expert
Snippet
Deklaratives asynchrones Zustandsmanagement mit der resource() API
Die experimentelle resource() API in Angular 19+ führt eine deklarative Methode zum Abrufen asynchroner Daten ein. Sie verfolgt automatisch Abhängigkeiten (wie userId), verarbeitet den Abbruch von Anfragen via abortSignal und stellt reaktive Status (idle, loading, resolved, error) direkt als Signals bereit, wodurch manuelle RxJS-Orchestrierung für einfache Fetch-Muster entfällt.
snippet.js
1
2
3
4
5
6
7
userData = resource({request: () => ({ id: this.userId() }),loader: async ({ request, abortSignal }) => {const res = await fetch(`/api/users/${request.id}`, { signal: abortSignal });return res.json();}});
angular
Erklärung
1
request: () => ({ id: this.userId() })
Definiert den reaktiven Trigger; sobald sich userId ändert, wird der Loader erneut ausgeführt.
2
loader: async ({ request, abortSignal }) => ...
Die asynchrone Funktion für den Datenabruf, die die aktuelle Anfrage und ein Abbruchsignal erhält.