javascript / beginner
Snippet
Behandlung asynchroner Fehler mit Await-Catch-Blöcken
Svelte ermöglicht die direkte Behandlung abgelehnter Promises (Rejections) im Markup über den {:catch error}-Block. Dadurch werden Netzwerk- oder Verarbeitungsfehler sauber im UI dargestellt, ohne dass die Komponente abstürzt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>async function fetchUserProfile(userId) {const res = await fetch(`/api/users/${userId}`);if (!res.ok) {throw new Error(`Failed to load profile (Status: ${res.status})`);}return res.json();}let userPromise = fetchUserProfile(42);</script>{#await userPromise}<p>Loading profile...</p>{:then user}<h2>{user.name}</h2>{:catch error}<p class="error">Error: {error.message}</p>{/await}
svelte
Erklärung
1
throw new Error(`Failed to load profile (Status: ${res.status})`);
Erzeugt und wirft ein aussagekräftiges Error-Objekt, wenn der HTTP-Statuscode nicht erfolgreich ist.
2
{:catch error}
Svelte-Block, der abgelehnte Promises abfängt und das geworfene Fehlerobjekt zur Anzeige im Template bindet.