javascript / intermediate
Snippet
Deklarative Async-Verarbeitung mit Await-Blöcken
Der #await-Block in Svelte ermöglicht es, Promises direkt im Markup zu verarbeiten. Er bietet eine saubere Methode, um die drei Zustände einer asynchronen Operation (ausstehend, erfüllt und abgelehnt) zu verwalten, ohne zusätzliche Statusvariablen für Lade- oder Fehlermeldungen zu benötigen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
<script>let promise = fetch('https://api.example.com/data').then(res => res.json());</script>{#await promise}<p>Loading data...</p>{:then data}<p>Result: {data.value}</p>{:catch error}<p style="color: red">Error: {error.message}</p>{/await}
svelte
Erklärung
1
{#await promise}
Startet den Block und abonniert das angegebene Promise.
2
{:then data}
Definiert das Template, das gerendert wird, wenn das Promise erfolgreich aufgelöst wurde.
3
{:catch error}
Definiert das Template für den Fall, dass das Promise abgelehnt wird.