javascript / beginner
Snippet
Abrufen von Remote-Benutzerprofilen mit Async Await und Try Catch
Bei der Durchführung von asynchronen HTTP-Anfragen in Vue-Komponenten ist die saubere Behandlung von Netzwerkfehlern und HTTP-Statusfehlern essenziell. Die Verwendung von async/await innerhalb eines try/catch/finally-Blocks stellt sicher, dass Fehler abgefangen werden und die Ladeanzeige stets zurückgesetzt wird, was die Benutzeroberfläche stabil hält.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { ref } from 'vue';const user = ref(null);const errorMessage = ref('');const isLoading = ref(false);async function loadUserData(userId) {isLoading.value = true;errorMessage.value = '';try {const response = await fetch(`https://api.example.com/users/${userId}`);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}user.value = await response.json();} catch (error) {errorMessage.value = error.message;} finally {isLoading.value = false;}}
vue
Erklärung
1
async function loadUserData(userId) {
Deklariert eine asynchrone Funktion, die die Verwendung von await zur Promise-Behandlung ermöglicht.
2
try {
Startet den Ausführungsblock, in dem Netzwerkanfragen und Datenverarbeitung versucht werden.
3
const response = await fetch(`https://api.example.com/users/${userId}`);
Pausiert die Ausführung, bis die HTTP-Fetch-Anfrage zu einem Response-Objekt aufgelöst wird.
4
if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); }
Prüft, ob der HTTP-Statuscode außerhalb des 200-299-Bereichs liegt, und wirft gegebenenfalls einen Fehler.
5
user.value = await response.json();
Wandelt den JSON-Antwortkörper asynchron um und weist die Daten der reaktiven Ref-Variable zu.
6
} catch (error) { errorMessage.value = error.message; }
Fängt Netzwerk- oder Verarbeitungsfehler ab und speichert die Nachricht zur Anzeige in einer reaktiven Variable.
7
} finally { isLoading.value = false; }
Wird unabhängig von Erfolg oder Misserfolg ausgeführt, um den Ladeindikator zuverlässig auszuschalten.