Vue Academy · Oppitunti

useFetch: asynkroninen composable

data-, loading- ja error-refit, haku mount-yhteydessä, refetch-funktio ja AbortController-puhdistus

Oppitunti 3/413 vaihetta

useFetch: asynkroninen composable on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

useFetch-funktion tavoite

Asynkroninen tietojen haku toistaa samoja asioita kaikkialla: lataustilan, virheenkäsittelyn ja itse pyynnön. useFetch kokoaa nämä yhdeksi uudelleenkäytettäväksi composable-funktioksi, joka palauttaa data-, loading- ja error-arvot.

Kolme reaktiivista refiä

Aloita kolmesta refistä, jotka kuvaavat minkä tahansa asynkronisen pyynnön tilaa.

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

Fetch-rutiini

Kirjoita asynkroninen funktio, joka asettaa loading-tilan päälle, suorittaa pyynnön ja tallentaa tuloksen. Viimeistelemme virheenkäsittelyn seuraavaksi.

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

try / catch / finally

Ympäröi pyyntö rakenteella, jossa virheet päätyvät error-arvoon ja loading palautetaan aina alkutilaan onnistumisesta tai epäonnistumisesta riippumatta finally-lohkossa.

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

Haku onMounted-koukussa

Käynnistä pyyntö, kun komponentti liitetään, jotta tiedot latautuvat automaattisesti.

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

refetch-funktio

Tarjoa execute nimellä refetch, jotta käyttäjät voivat ladata tiedot uudelleen pyydettäessä – esimerkiksi muutoksen jälkeen tai uudelleenyrityspainikkeella.

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

AbortController siivousta varten

Jos komponentti poistetaan kesken pyynnön, keskeytä fetch, jotta tilaa ei yritetä asettaa poistuneeseen komponenttiin. Luo AbortController ja välitä sen signal pyyntöön.

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

Keskeyttäminen irrotuksen yhteydessä

Peruuta käynnissä oleva pyyntö onUnmounted-koukussa. Ohita tästä syntyvä keskeytysvirhe catch-lohkossa.

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

Koko useFetch-funktio

Valmiiksi koottuna composable-funktio käsittelee latauksen, virheet, uudelleenhaun ja siivouksen yhtenä selkeänä kokonaisuutena.

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

Käyttäminen komponentissa

Käyttäjät muodostavat näkymän kolmen ref-arvon perusteella: latauksen aikana näytetään latausilmaisin, virheen yhteydessä virheilmoitus ja muulloin tiedot.

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

Mallineen rakenne

Valitse mallineessa näytettävä sisältö tilan perusteella, jotta käyttökokemus on kattava.

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

Pikatarkistus

Mikä on AbortController-objektin tehtävä useFetch-funktiossa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Rakensit useFetch(url)-funktion, joka tarjoaa data-, loading- ja error-refit, suorittaa haun onMounted-koukussa try/catch/finally-rakenteella, sisältää refetch-funktion ja siivoaa AbortController-objektin onUnmounted-koukussa.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”useFetch: asynkroninen composable” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “useFetch: asynkroninen composable”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”useFetch: asynkroninen composable”?

data-, loading- ja error-refit, haku mount-yhteydessä, refetch-funktio ja AbortController-puhdistus Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”useFetch: asynkroninen composable”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vue Academy