javascript / beginner
Snippet
Asynchrones Abrufen von Profildaten mittels Async Await in Vue
Die Schlüsselwörter async und await bieten eine übersichtliche Syntax für asynchrone, Promise-basierte Operationen. In Vue-Komponenten pausieren async-Funktionen in Lifecycle-Hooks wie onMounted die Ausführung, bis Netzwerkanfragen aufgelöst sind, und aktualisieren anschließend reaktive Daten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { ref, onMounted } from 'vue';export default {setup() {const user = ref(null);const isLoading = ref(true);async function loadUserProfile() {isLoading.value = true;const response = await fetch('https://api.example.com/user/1');user.value = await response.json();isLoading.value = false;}onMounted(loadUserProfile);return { user, isLoading };}};
vue
Erklärung
1
async function loadUserProfile() {
Deklariert eine asynchrone Funktion, die mit dem await-Schlüsselwort pausiert werden kann.
2
const response = await fetch('https://api.example.com/user/1');
Wartet, bis das Promise der HTTP-Netzwerkanfrage abgeschlossen ist.
3
user.value = await response.json();
Wartet auf das Parsen der Antwort als JSON und weist das Ergebnis der reaktiven Variable zu.
4
onMounted(loadUserProfile);
Führt die asynchrone Ladefunktion aus, sobald die Vue-Komponente im DOM gemountet ist.