Daten abrufen: useFetch und useAsyncData
useFetch(), useAsyncData(), serverseitiges vs. clientseitiges Abrufen, refresh() und ausstehender Status
Daten abrufen: useFetch und useAsyncData ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Daten in Nuxt abrufen
Nuxt stellt SSR-fähige Composables zum Abrufen von Daten bereit. Sie laufen während des Renderns auf dem Server und übertragen die Ergebnisse an den Client. Dadurch werden eine doppelte Anfrage und das kurzzeitige Anzeigen leerer Inhalte vermieden.
Grundlagen von useFetch
useFetch kapselt den Abruf einer URL. Es gibt reaktive Werte für data, pending und error zurück, die Sie direkt im Template verwenden können.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Ladezustände und Fehler anzeigen
Verwenden Sie pending für einen Ladezustand und error für Fehler. data enthält das geparste JSON.
<template>
<p v-if="pending">Loading...</p>
<p v-else-if="error">Failed to load</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>
</template>useAsyncData für eigene Logik
Wenn Sie mehr als eine einfache URL benötigen – etwa um Aufrufe zu kombinieren oder Ergebnisse zu transformieren –, verwenden Sie useAsyncData. Es benötigt einen eindeutigen Schlüssel und eine Fetcher-Funktion.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Warum der Schlüssel wichtig ist
Der Schlüssel dedupliziert und cached die Anfrage. Zwei Komponenten, die denselben Schlüssel verwenden, teilen sich ein Ergebnis und einen Netzwerkaufruf. Dadurch werden redundante Abrufe vermieden.
useFetch ist syntaktischer Zucker
Intern ist useFetch(url) im Wesentlichen useAsyncData mit einem automatisch erzeugten Schlüssel und einem $fetch(url)-Fetcher. Verwenden Sie useFetch für einfache URLs und useAsyncData für eigene Fetcher.
Nur clientseitig mit server:false
Setzen Sie server: false, um den Abruf während des SSR zu überspringen und ihn nur im Client auszuführen – nützlich für benutzerspezifische Daten, die das serverseitige Rendern nicht blockieren sollen.
const { data } = await useFetch('/api/me', {
server: false
})Verzögerte, nicht blockierende Abrufe
Standardmäßig blockiert await die Navigation, bis die Daten eintreffen. Mit der Option lazy (oder useLazyFetch) kann die Seite sofort gerendert und mit den Daten gefüllt werden, sobald diese verfügbar sind.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})Erneutes Abrufen mit refresh
Die Composables geben eine refresh-Funktion zurück, mit der Sie den Abruf bei Bedarf erneut ausführen können – etwa nach einer Mutation oder einem Klick auf eine Schaltfläche.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Reaktive Query-Parameter
Übergeben Sie eine query oder reaktive Optionen. Wenn sich eine beobachtete ref ändert, wird der Abruf automatisch erneut ausgeführt. Binden Sie watch, um bei Änderungen von Abhängigkeiten erneut abzurufen.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Die Antwort transformieren
Die Option transform formt die Antwort um, bevor sie data erreicht – praktisch, um nur die benötigten Felder auszuwählen und die an den Client gesendete Nutzlast zu verkleinern.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Schnelltest
Testen Sie Ihr Wissen über das Abrufen von Daten in Nuxt.
Zusammenfassung
Sie haben das Abrufen von Daten in Nuxt gelernt:
- useFetch gibt reaktive Daten sowie pending und error zurück.
- useAsyncData benötigt einen Schlüssel und einen Fetcher für eigene Logik.
- server:false läuft nur im Client; lazy macht den Abruf nicht blockierend.
- refresh() ruft die Daten erneut ab; watch führt den Abruf bei Änderungen von Abhängigkeiten erneut aus.
Häufig gestellte Fragen
Ist die Lektion „Daten abrufen: useFetch und useAsyncData“ kostenlos?
Ja — der vollständige Text von „Daten abrufen: useFetch und useAsyncData“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Daten abrufen: useFetch und useAsyncData“?
useFetch(), useAsyncData(), serverseitiges vs. clientseitiges Abrufen, refresh() und ausstehender Status Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Daten abrufen: useFetch und useAsyncData“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Nuxt-3-Projektstruktur und dateibasierte Routen
- Daten abrufen: useFetch und useAsyncData
- Nuxt-Serverrouten und API-Endpunkte
- SSR vs. SSG vs. SPA-Modus