javascript / expert
Snippet
Defensive Async-UI mit Catch-Blöcken
Sveltes #await-Block bietet eine native Möglichkeit, asynchrone Datenströme direkt im Template zu handhaben. Der catch-Zweig stellt sicher, dass Laufzeitfehler (wie Netzwerkfehler) elegant abgefangen werden, ohne die UI zum Absturz zu bringen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
{#await fetchUserData(id)}<p>Loading profile...</p>{:then user}<h1>{user.name}</h1>{:catch error}<div class="error-banner"><p>Could not load user: {error.message}</p><button onclick={retry}>Retry</button></div>{/await}
svelte
Erklärung
1
{#await fetchUserData(id)}
Initiiert das Promise und zeigt den anfänglichen ausstehenden Status an.
2
{:then user}
Wird ausgeführt, wenn das Promise erfüllt ist, und bietet Zugriff auf die zurückgegebenen Daten.
3
{:catch error}
Erfasst jede Ablehnung oder jeden Fehler, der während des Abrufs auftritt, für die Fallback-UI.