javascript / beginner
Snippet
Behandeln von asynchronen API-Fetch-Anfragen und Fehlern in Svelte
Asynchrone JavaScript-Operationen wie HTTP-Netzwerkanfragen können innerhalb von `async`-Funktionen mit `try...catch`-Blöcken gekapselt werden. Svelte rendert bedingt UI-Rückmeldungen basierend darauf, ob Daten erfolgreich abgerufen oder von der Fehlerbehandlungslogik abgefangen wurden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>let quote = "";let errorMessage = "";async function fetchQuote() {errorMessage = "";try {const response = await fetch("https://api.quotable.io/random");if (!response.ok) throw new Error("Network response failed");const data = await response.json();quote = data.content;} catch (err) {errorMessage = err.message;}}</script><button on:click={fetchQuote}>Get Quote</button>{#if errorMessage}<p class="error">Error: {errorMessage}</p>{:else if quote}<blockquote>{quote}</blockquote>{/if}
svelte
Erklärung
1
async function fetchQuote() {
Deklariert eine asynchrone Funktion zur Bearbeitung von Promise-basierten Operationen ohne UI-Blockierung.
2
try {
Startet einen Codeblock zum Abfangen möglicher Laufzeit-, Netzwerk- oder Parsing-Fehler.
3
const response = await fetch("https://api.quotable.io/random");
Pausiert die Ausführung, bis die HTTP-Fetch-Anfrage ein Response-Objekt zurückgibt.
4
if (!response.ok) throw new Error("Network response failed");
Prüft den HTTP-Statuscode und wirft einen Fehler aus, wenn die Anfrage nicht erfolgreich war.
5
const data = await response.json();
Parst den Text des Antwortkörpers asynchron als JSON-Objekt.
6
} catch (err) {
Fängt aufgetretene Fehler ab und weist die Fehlermeldung zur Anzeige der Zustandsvariable zu.