javascript / beginner
Snippet
Asynchrone Fehlerbehandlung beim Datenabruf im Setup
Die Verwendung von try/catch in asynchronen Funktionen stellt sicher, dass Netzwerkfehler oder fehlerhafte HTTP-Statuscodes abgefangen und in reaktiven Zuständen dargestellt werden, anstatt das Skript abbrechen zu lassen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref } from 'vue';const user = ref(null);const errorMessage = ref(null);async function loadUserData(userId) {try {errorMessage.value = null;const res = await fetch(`/api/user/${userId}`);if (!res.ok) {throw new Error('Network response failed');}user.value = await res.json();} catch (err) {errorMessage.value = err.message;}}
vue
Erklärung
1
try {
Startet einen geschützten Block, um asynchrone Operationen auf Laufzeitfehler zu überwachen.
2
if (!res.ok) { throw new Error('Network response failed'); }
Löst manuell einen Fehler aus, wenn der Server einen fehlerhaften HTTP-Statuscode liefert.
3
user.value = await res.json();
Wandelt die JSON-Antwort um und speichert sie bei Erfolg in der reaktiven Variable.
4
} catch (err) { errorMessage.value = err.message; }
Fängt Fehler ab und speichert die Fehlerbeschreibung im reaktiven Zustand.