Vue Academy · Lektion

useFetch: Composable til asynkrone data

data-, loading- og error-refs, hentning ved montering, refetch-funktion og oprydning med AbortController

Lektion 3 af 413 trin

useFetch: Composable til asynkrone data er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Målet med useFetch

Asynkron datahentning gentages overalt: indlæsningsflag, fejlhåndtering og selve anmodningen. useFetch samler det i én genbrugelig composable, der returnerer data, loading og error.

De tre reaktive refs

Start med tre refs, der beskriver tilstanden for enhver asynkron anmodning.

import { ref } from "vue";
function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
}

Henterutinen

Skriv en asynkron funktion, der slår loading til, udfører anmodningen og gemmer resultatet. Vi forbedrer fejlhåndteringen bagefter.

async function execute() {
  loading.value = true;
  const res = await fetch(url);
  data.value = await res.json();
  loading.value = false;
}

try / catch / finally

Pak anmodningen ind, så fejl ender i error, og loading altid nulstilles, uanset om resultatet er en succes eller en fejl, i finally.

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;
  }
}

Hentning i onMounted

Start anmodningen, når komponenten monteres, så data indlæses automatisk.

import { onMounted } from "vue";
onMounted(execute);

En refetch-funktion

Eksponér execute som refetch, så brugerne kan indlæse data igen efter behov – efter en ændring eller via en genforsøgsknap.

return { data, loading, error, refetch: execute };

AbortController til oprydning

Hvis komponenten afmonteres midt under anmodningen, skal hentningen afbrydes for at undgå at sætte tilstand på en komponent, der ikke længere findes. Opret en AbortController, og send dens signal med.

const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });

Afbrydelse ved afmontering

Annullér den igangværende anmodning i onUnmounted. Ignorér den resulterende afbrydelsesfejl i catch-blokken.

import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());

Den komplette useFetch

Samlet set håndterer composablen indlæsning, fejl, genindlæsning og oprydning i én overskuelig enhed.

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 };
}

Brug i en komponent

Brugerne gengiver indhold baseret på de tre refs – en indlæsningsindikator under indlæsning, en fejlmeddelelse ved fejl og ellers dataene.

const { data, loading, error } = useFetch("/api/posts");

Skabelonmønster

Forgren visningen ud fra tilstanden i brugergrænsefladen.

<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>

Hurtigt tjek

Hvilken rolle spiller AbortController i useFetch?

Besvar den i den interaktive lektion

Opsummering

Du har bygget useFetch(url), der eksponerer refsene data, loading og error, henter data i onMounted med et try/catch/finally-mønster, har en refetch-funktion og en AbortController, der ryddes op i onUnmounted.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “useFetch: Composable til asynkrone data” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “useFetch: Composable til asynkrone data”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “useFetch: Composable til asynkrone data”?

data-, loading- og error-refs, hentning ved montering, refetch-funktion og oprydning med AbortController Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “useFetch: Composable til asynkrone data”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Vue Academy