javascript / beginner
Snippet
Abrufen von Remote-Benutzerprofilen mit Async Await in Vue
Die async/await-Syntax ermöglicht das Schreiben von asynchronem JavaScript-Code, der sich wie synchroner Code liest. Das Einschließen von Netzwerkanfragen in try/catch/finally stellt sicher, dass Fehler abgefangen und Ladeindikatoren in Vue-Komponenten immer zurückgesetzt werden.
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 isLoading = ref(false);const errorMessage = ref('');async function fetchUserData(userId) {isLoading.value = true;errorMessage.value = '';try {const response = await fetch(`https://api.example.com/users/${userId}`);if (!response.ok) {throw new Error('Network response was not ok');}user.value = await response.json();} catch (err) {errorMessage.value = err.message;} finally {isLoading.value = false;}}
vue
Erklärung
1
const isLoading = ref(false);
Ein reaktives Flag, das von der Benutzeroberfläche verwendet wird, um einen Ladeindikator anzuzeigen oder auszublenden.
2
async function fetchUserData(userId) {
Kennzeichnet die Funktion als asynchron, um das Schlüsselwort await darin verwenden zu können.
3
const response = await fetch(`https://api.example.com/users/${userId}`);
Pausiert die Funktionsausführung, bis die HTTP-Fetch-Anfrage abgeschlossen ist.
4
if (!response.ok) {
Prüft, ob der HTTP-Status außerhalb des erfolgreichen Bereichs 200-299 liegt, und wirft einen Fehler.
5
user.value = await response.json();
Parst den eingehenden JSON-Body und weist das Ergebnis dem reaktiven user-Ref zu.
6
finally { isLoading.value = false; }
Garantiert, dass der Ladezustand beendet wird, unabhängig davon, ob die Anfrage erfolgreich war oder fehlgeschlagen ist.