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

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

async function loadUserProfile() {

Deklariert eine asynchrone Funktion, die mit dem await-Schlüsselwort pausiert werden kann.

const response = await fetch('https://api.example.com/user/1');

Wartet, bis das Promise der HTTP-Netzwerkanfrage abgeschlossen ist.

user.value = await response.json();

Wartet auf das Parsen der Antwort als JSON und weist das Ergebnis der reaktiven Variable zu.

onMounted(loadUserProfile);

Führt die asynchrone Ladefunktion aus, sobald die Vue-Komponente im DOM gemountet ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Asynchrones Abrufen von Profildaten mittels Async Await in Vue

Verwandt