useFetch: Asynchrones Composable für Daten
Refs für Daten, Ladevorgang und Fehler, Abruf beim Mounten, refetch-Funktion und Bereinigung mit AbortController
useFetch: Asynchrones Composable für Daten ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Das Ziel von useFetch
Das asynchrone Abrufen von Daten wiederholt sich überall: Ladeanzeigen, Fehlerbehandlung und die Anfrage selbst. useFetch bündelt dies in einem wiederverwendbaren Komposable, das data, loading und error zurückgibt.
Die drei reaktiven Refs
Beginnen Sie mit drei Refs, die den Zustand jeder asynchronen Anfrage beschreiben.
import { ref } from "vue";
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
}Die Fetch-Routine
Schreiben Sie eine asynchrone Funktion, die loading umschaltet, die Anfrage ausführt und das Ergebnis speichert. Als Nächstes verfeinern wir die Fehlerbehandlung.
async function execute() {
loading.value = true;
const res = await fetch(url);
data.value = await res.json();
loading.value = false;
}try / catch / finally
Umschließen Sie die Anfrage, sodass Fehler in error landen und loading in finally unabhängig vom Erfolg oder Fehlschlag immer zurückgesetzt wird.
async function execute() {
loading.value = true;
error.value = null;
try {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
data.value = await res.json();
} catch (e) {
error.value = e;
} finally {
loading.value = false;
}
}Abrufen in onMounted
Starten Sie die Anfrage, wenn die Komponente eingebunden wird, damit die Daten automatisch geladen werden.
import { onMounted } from "vue";
onMounted(execute);Eine refetch-Funktion
Stellen Sie execute als refetch bereit, damit Nutzende die Daten bei Bedarf neu laden können – etwa nach einer Mutation oder über eine Schaltfläche zum erneuten Versuch.
return { data, loading, error, refetch: execute };AbortController zur Bereinigung
Wenn die Komponente während einer Anfrage ausgehängt wird, brechen Sie den Fetch ab, damit kein Zustand einer nicht mehr aktiven Komponente gesetzt wird. Erstellen Sie einen AbortController und übergeben Sie dessen Signal.
const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });Beim Aushängen abbrechen
Brechen Sie die laufende Anfrage in onUnmounted ab. Ignorieren Sie den daraus entstehenden Abbruchfehler im catch-Block.
import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());Das vollständige useFetch
Zusammengesetzt kümmert sich das Komposable in einer übersichtlichen Einheit um Laden, Fehler, erneutes Abrufen und Bereinigung.
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
const controller = new AbortController();
async function execute() {
loading.value = true; error.value = null;
try {
const res = await fetch(url, { signal: controller.signal });
data.value = await res.json();
} catch (e) {
if (e.name !== "AbortError") error.value = e;
} finally {
loading.value = false;
}
}
onMounted(execute);
onUnmounted(() => controller.abort());
return { data, loading, error, refetch: execute };
}In einer Komponente verwenden
Nutzende rendern abhängig von den drei Refs: während des Ladens einen Spinner, bei einem Fehler eine Fehlermeldung und ansonsten die Daten.
const { data, loading, error } = useFetch("/api/posts");Template-Muster
Verzweigen Sie im Template anhand des Zustands, um eine vollständige UX bereitzustellen.
<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>Kurze Überprüfung
Welche Aufgabe hat AbortController in useFetch?
Zusammenfassung
Sie haben useFetch(url) erstellt, das die Refs data, loading und error bereitstellt, die Daten mit einem try/catch/finally-Muster in onMounted abruft, eine refetch-Funktion enthält und einen in onUnmounted bereinigten AbortController verwendet.
Häufig gestellte Fragen
Ist die Lektion „useFetch: Asynchrones Composable für Daten“ kostenlos?
Ja — der vollständige Text von „useFetch: Asynchrones Composable für Daten“ 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 „useFetch: Asynchrones Composable für Daten“?
Refs für Daten, Ladevorgang und Fehler, Abruf beim Mounten, refetch-Funktion und Bereinigung mit AbortController 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 3 von 4.
Wie lange dauert die Lektion „useFetch: Asynchrones Composable für Daten“?
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
- Was ein gutes Composable ausmacht
- useCounter: Ein einfaches Composable
- useFetch: Asynchrones Composable für Daten
- VueUse: Die Composable-Bibliothek