javascript / beginner
Snippet
Verwalten asynchroner Promise-Zustände mit Svelte Await-Blöcken
Der {#await}-Block in Svelte vereinfacht die Handhabung von JavaScript-Promises direkt in der Ansicht. Er wechselt nahtlos zwischen ausstehenden, aufgelösten ({:then}) und abgelehnten ({:catch}) asynchronen Zuständen, ohne dass manuelle Statusvariablen für Ladevorgänge oder Fehler erforderlich sind.
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 fetchSystemHealth() {const response = await fetch("https://api.example.com/health");if (!response.ok) {throw new Error(`HTTP error ${response.status}`);}return response.json();}let healthPromise = fetchSystemHealth();</script>{#await healthPromise}<p>Checking service status...</p>{:then data}<p class="online">Service OK: {data.status}</p>{:catch error}<p class="error">Health check failed: {error.message}</p>{/await}
svelte
Erklärung
1
throw new Error(`HTTP error ${response.status}`);
Erzeugt und wirft einen Fehler, falls der HTTP-Antwortstatus nicht erfolgreich war.
2
let healthPromise = fetchSystemHealth();
Speichert das noch nicht aufgelöste Promise des asynchronen Funktionsaufrufs.
3
{#await healthPromise}
Zeigt Ladehinweise an, während das Promise noch ausstehend ist.
4
{:catch error}
Fängt abgelehnte Fehler des Promises ab und rendert die Fehlermeldung.