javascript / beginner
Snippet
Verwaltung von asynchronen Zuständen und Fehlern mit Await-Blöcken
Asynchrone JavaScript-Funktionen geben Promises zurück, die die Zustände ausstehend (pending), aufgelöst (resolved) und abgelehnt (rejected) durchlaufen. Der await-Block von Svelte spiegelt diesen Lebenszyklus direkt im Template wider und bietet separate Bereiche für Ladezustand, erfolgreiche Daten und Fehlerbehandlung ohne manuelle Statusvariablen.
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 fetchRandomFact() {const res = await fetch('https://api.sampleapis.com/futurama/info');if (!res.ok) {throw new Error(`HTTP error! status: ${res.status}`);}return res.json();}let factPromise = fetchRandomFact();</script>{#await factPromise}<p>Loading facts...</p>{:then data}<p>{data[0].synopsis}</p>{:catch error}<p style="color: red;">Failed to load: {error.message}</p>{/await}
svelte
Erklärung
1
async function fetchRandomFact() { ... }
Deklariert eine asynchrone Funktion, die Daten abruft und ein Promise zurückgibt.
2
if (!res.ok) { throw new Error(...); }
Prüft den HTTP-Status und wirft einen Fehler, falls die Netzwerkanfrage fehlschlägt.
3
{#await factPromise} ... {:then data} ... {:catch error}
Behandelt die Zustände ausstehend, erfolgreich und fehlerhaft des Promise direkt in der Vorlage.