javascript / beginner
Snippet
Verarbeiten asynchroner API-Anfragen beim Laden der Komponente
Die Verwaltung asynchroner Operationen mit async/await und try/catch/finally gewährleistet saubere Statusübergänge für Ladezustand, Datenspeicherung und Fehleranzeigen beim Laden der Komponente.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { ref, onMounted } from 'vue';const userProfile = ref(null);const isLoading = ref(false);const fetchError = ref(null);onMounted(async () => {isLoading.value = true;try {const response = await fetch('https://api.example.com/profile');if (!response.ok) {throw new Error(`HTTP Error: ${response.status}`);}userProfile.value = await response.json();} catch (err) {fetchError.value = err.message;} finally {isLoading.value = false;}});
vue
Erklärung
1
const isLoading = ref(false);
Deklariert ein boolesches Flag, um anzuzeigen, ob die Netzwerkanfrage aktuell läuft.
2
onMounted(async () => {
Registriert einen asynchronen Lifecycle-Hook, der direkt nach dem Mounten der Komponente ausgeführt wird.
3
const response = await fetch('https://api.example.com/profile');
Wartet auf die HTTP-Netzwerkantwort des API-Endpunkts.
4
if (!response.ok) { throw new Error(`HTTP Error: ${response.status}`); }
Überprüft, ob der HTTP-Status fehlerhaft ist, und löst den catch-Block aus.
5
finally { isLoading.value = false; }
Stellt sicher, dass der Ladeindikator sowohl bei Erfolg als auch bei Fehlern deaktiviert wird.