javascript / expert
Snippet
Deklaratives Daten-Fetching mit der Resource API
Die Resource API (eingeführt in Angular 19) bietet eine deklarative Möglichkeit, asynchrones Daten-Fetching als Signal zu handhaben. Sie verwaltet automatisch Ladezustände, Fehler und Abbrüche (via abortSignal) und reagiert auf Änderungen vorgelagerter Signale im 'request'-Parameter.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { resource, signal } from '@angular/core';export class UserProfile {userId = signal(123);userResource = resource({request: () => ({ id: this.userId() }),loader: async ({ request, abortSignal }) => {const resp = await fetch(`https://api.example.com/users/${request.id}`, { signal: abortSignal });if (!resp.ok) throw new Error('Fetch failed');return await resp.json();}});updateUser() {// Changing the signal automatically triggers a new loader executionthis.userId.set(456);}}
angular
Erklärung
1
request: () => ({ id: this.userId() })
Definiert die reaktiven Abhängigkeiten; der Loader wird neu ausgeführt, sobald sich userId ändert.
2
loader: async ({ request, abortSignal }) => { ... }
Die asynchrone Funktion zum Abrufen der Daten, die das Request-Payload und ein Abruchticket erhält.
3
userResource = resource({ ... })
Erzeugt eine ResourceRef, die Signale für Wert, Status und Fehler enthält.