javascript / beginner
Snippet
Asynchrone Promises über Svelte Await-Blöcke verarbeiten
Der `{#await}`-Block ermöglicht es Komponenten, ausstehende, aufgelöste und abgelehnte Zustände eines Promise deklarativ im Markup zu behandeln, ohne manuelle Statusvariablen verwalten zu müssen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>async function fetchGreeting() {const response = await fetch('https://api.example.com/greeting');const data = await response.json();return data.message;}let greetingPromise = fetchGreeting();</script>{#await greetingPromise}<p>Loading greeting...</p>{:then message}<p>Server message: {message}</p>{:catch error}<p>Failed to load: {error.message}</p>{/await}
svelte
Erklärung
1
let greetingPromise = fetchGreeting();
Weist einer im Template zugänglichen Variable ein noch nicht aufgelöstes Promise zu.
2
{#await greetingPromise}
Rendert den Ladezustand, solange das Promise noch aussteht.
3
{:then message}
Rendert den Inhalt bei erfolgreicher Auflösung und bindet den Rückgabewert an message.
4
{:catch error}
Rendert den Fehlerzustand bei einem Fehlschlag und übergibt das Fehlerobjekt.
5
{/await}
Schließt den asynchronen Template-Block ab.