javascript / beginner
Snippet
Asynchrone Anfragefehler mit Try Catch in Svelte verwalten
Das Kapseln asynchroner Operationen in einem `try...catch`-Block fängt Netzwerk- und Verarbeitungsfehler ab, sodass der UI-Zustand sauber mit benutzerfreundlichen Meldungen aktualisiert werden kann.
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
24
25
26
27
<script>let status = 'idle';let errorMessage = '';async function sendReport() {status = 'submitting';errorMessage = '';try {const response = await fetch('/api/report', { method: 'POST' });if (!response.ok) {throw new Error('Server returned an error status code');}status = 'success';} catch (err) {status = 'error';errorMessage = err.message;}}</script><button on:click={sendReport} disabled={status === 'submitting'}>Submit Report</button>{#if status === 'error'}<p class="error">Error: {errorMessage}</p>{/if}
svelte
Erklärung
1
try {
Startet den Codeblock, der auf Laufzeitfehler und fehlgeschlagene Operationen überwacht wird.
2
throw new Error('Server returned an error status code');
Löst manuell eine Error-Instanz aus, falls der HTTP-Status auf einen Fehler hinweist.
3
} catch (err) {
Fängt jede während des Fetch-Ablaufs ausgelöste Ausnahme ab.
4
errorMessage = err.message;
Extrahiert den lesbaren Fehlertext aus dem Fehlerobjekt zur Anzeige im Markup.