Recupero dei dati: useFetch e useAsyncData
useFetch(), useAsyncData(), fetch lato server rispetto a lato client, refresh(), stato pending.
Recupero dei dati: useFetch e useAsyncData è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Recuperare dati in Nuxt
Nuxt fornisce composable per il recupero dei dati consapevoli dell'SSR. Vengono eseguiti sul server durante il rendering e trasferiscono i risultati al client, evitando una richiesta duplicata e la comparsa temporanea di contenuti vuoti.
Nozioni di base su useFetch
useFetch incapsula il recupero di un URL. Restituisce i valori reattivi data, pending ed error, che potete usare direttamente nel template.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Visualizzazione degli stati di caricamento e degli errori
Utilizzi pending per lo stato di caricamento e error per gli errori. data contiene il JSON analizzato.
<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 per la logica personalizzata
Quando serve qualcosa di più di un semplice URL, ad esempio combinare chiamate o trasformare i risultati, utilizzi useAsyncData. Richiede una chiave univoca e una funzione fetcher.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Perché la chiave è importante
La chiave elimina le richieste duplicate e memorizza la richiesta nella cache. Due componenti che utilizzano la stessa chiave condividono un unico risultato e un'unica chiamata di rete, evitando recuperi dati ridondanti.
useFetch è zucchero sintattico
Internamente, useFetch(url) è essenzialmente useAsyncData con una chiave generata automaticamente e un fetcher $fetch(url). Utilizzi useFetch per gli URL semplici e useAsyncData per i fetcher personalizzati.
Solo client con server:false
Imposti server: false per saltare il fetch durante l'SSR ed eseguirlo solo sul client: è utile per i dati specifici dell'utente che non devono bloccare il rendering sul server.
const { data } = await useFetch('/api/me', {
server: false
})Fetch lazy non bloccanti
Per impostazione predefinita, await blocca la navigazione finché i dati non arrivano. L'opzione lazy (o useLazyFetch) consente alla pagina di eseguire subito il rendering e di completarsi con i dati quando questi sono disponibili.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})Nuovo fetch con refresh
I composable restituiscono una funzione refresh per eseguire nuovamente il fetch su richiesta, ad esempio dopo una mutation o il clic su un pulsante.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Parametri di query reattivi
Passi una query o delle opzioni reattive: quando cambia un ref osservato, il fetch viene eseguito nuovamente in automatico. Colleghi watch per ripetere il fetch quando cambiano le dipendenze.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Trasformazione della risposta
L'opzione transform ristruttura la risposta prima che raggiunga data: è utile per selezionare solo i campi necessari e ridurre il payload inviato al client.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Verifica rapida
Verifichi la sua conoscenza del recupero dati in Nuxt.
Riepilogo
Ha imparato a recuperare dati in Nuxt:
- useFetch restituisce dati reattivi, pending ed error.
- useAsyncData richiede una chiave e un fetcher per la logica personalizzata.
- server:false esegue il fetch solo sul client; lazy lo rende non bloccante.
- refresh() esegue nuovamente il fetch; watch lo ripete quando cambia una dipendenza.
Domande Frequenti
La lezione «Recupero dei dati: useFetch e useAsyncData» è gratuita?
Sì — il testo completo di «Recupero dei dati: useFetch e useAsyncData» è 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 «Recupero dei dati: useFetch e useAsyncData»?
useFetch(), useAsyncData(), fetch lato server rispetto a lato client, refresh(), stato pending. 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 2 di 4.
Quanto tempo richiede la lezione «Recupero dei dati: useFetch e useAsyncData»?
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
- Struttura dei progetti Nuxt 3 e routing basato sui file
- Recupero dei dati: useFetch e useAsyncData
- Route server e endpoint API di Nuxt
- Modalità SSR, SSG e SPA a confronto