Vue Academy · Lezione

useFetch: composable per dati asincroni

ref per dati, caricamento ed errori, fetch al montaggio, funzione refetch, pulizia con AbortController.

useFetch: composable per dati asincroni è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

L'obiettivo di useFetch

Il recupero asincrono dei dati si ripete ovunque: indicatori di caricamento, gestione degli errori e richiesta vera e propria. useFetch riunisce tutto in un unico composable riutilizzabile che restituisce data, loading ed error.

I tre ref reattivi

Si parte da tre ref che descrivono lo stato di qualsiasi richiesta asincrona.

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

La routine di fetch

Scriva una funzione asincrona che imposti loading, esegua la richiesta e memorizzi il risultato. La gestione degli errori verrà perfezionata nel passaggio successivo.

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

try / catch / finally

Racchiuda la richiesta in modo che gli errori finiscano in error e loading venga sempre reimpostato, in caso di successo o di errore, all'interno di 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;
  }
}

Eseguire il fetch in onMounted

Avvii la richiesta quando il componente viene montato, così i dati vengono caricati automaticamente.

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

Una funzione di refetch

Esponga execute con il nome refetch, così chi usa il composable può ricaricare i dati su richiesta, ad esempio dopo una mutazione o tramite un pulsante per riprovare.

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

AbortController per la pulizia

Se il componente viene smontato durante una richiesta, annulli il fetch per evitare di aggiornare lo stato di un componente non più attivo. Crei un AbortController e passi il relativo signal.

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

Annullare lo smontaggio

Annulli la richiesta in corso in onUnmounted. Ignori nel catch l'errore risultante dall'annullamento.

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

Il composable useFetch completo

Una volta assemblato, il composable gestisce caricamento, errori, nuovo fetch e pulizia in un'unica unità ordinata.

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

Usarlo in un componente

Chi usa il composable esegue il rendering in base ai tre ref: un indicatore durante il caricamento, un messaggio di errore in caso di problemi e i dati negli altri casi.

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

Struttura del template

Gestisca i vari stati nel template per offrire un'esperienza utente completa.

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

Verifica rapida

Qual è il ruolo di AbortController in useFetch?

Riepilogo

Ha creato useFetch(url), che espone i ref data, loading ed error, esegue il fetch in onMounted secondo uno schema try/catch/finally, offre una funzione refetch e gestisce un AbortController in onUnmounted.

Domande Frequenti

La lezione «useFetch: composable per dati asincroni» è gratuita?

Sì — il testo completo di «useFetch: composable per dati asincroni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «useFetch: composable per dati asincroni»?

ref per dati, caricamento ed errori, fetch al montaggio, funzione refetch, pulizia con AbortController. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «useFetch: composable per dati asincroni»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy