Récupération des données : useFetch et useAsyncData
useFetch(), useAsyncData(), récupération côté serveur ou côté client, refresh() et état en attente
Récupération des données : useFetch et useAsyncData est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Récupérer des données dans Nuxt
Nuxt fournit des composables de récupération de données compatibles avec SSR. Ils s’exécutent sur le serveur pendant le rendu et transmettent les résultats au client, ce qui évite une requête en double et l’affichage furtif d’un contenu vide.
Les bases de useFetch
useFetch encapsule la récupération d’une URL. Il renvoie les valeurs réactives data, pending et error, que vous pouvez utiliser directement dans le modèle.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Affichage du chargement et des erreurs
Utilisez pending pour l’état de chargement et error pour les échecs. data contient le JSON analysé.
<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 pour une logique personnalisée
Lorsque vous avez besoin de plus qu’une simple URL — pour combiner des appels ou transformer les résultats — utilisez useAsyncData. Il reçoit une clé unique et une fonction de récupération.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Pourquoi la clé est importante
La clé déduplique et met en cache la requête. Deux composants utilisant la même clé partagent un seul résultat et un seul appel réseau, ce qui évite les récupérations redondantes.
useFetch est un raccourci
En interne, useFetch(url) est essentiellement useAsyncData avec une clé générée automatiquement et une fonction de récupération $fetch(url). Utilisez useFetch pour les URL simples et useAsyncData pour les fonctions de récupération personnalisées.
Côté client uniquement avec server:false
Définissez server: false pour ignorer la récupération pendant le SSR et ne l’exécuter que côté client — c’est utile pour les données propres à l’utilisateur qui ne doivent pas bloquer le rendu côté serveur.
const { data } = await useFetch('/api/me', {
server: false
})Récupérations différées et non bloquantes
Par défaut, await bloque la navigation jusqu’à l’arrivée des données. L’option lazy (ou useLazyFetch) permet à la page de s’afficher immédiatement, puis de remplir les données lorsqu’elles sont disponibles.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})Relancer la récupération avec refresh
Les composables renvoient une fonction refresh qui relance la récupération à la demande — après une mutation ou un clic sur un bouton.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Paramètres de requête réactifs
Passez un query ou des options réactives ; lorsqu’une ref surveillée change, la récupération est relancée automatiquement. Liez watch pour relancer la récupération lorsque les dépendances changent.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Transformer la réponse
L’option transform remodèle la réponse avant qu’elle n’atteigne data — pratique pour ne sélectionner que les champs dont vous avez besoin et réduire la charge utile envoyée au client.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Vérification rapide
Vérifiez vos connaissances sur la récupération de données avec Nuxt.
Récapitulatif
Vous avez découvert la récupération de données avec Nuxt :
- useFetch renvoie des données réactives, pending et error.
- useAsyncData reçoit une clé et une fonction de récupération pour une logique personnalisée.
- server:false s’exécute uniquement côté client ; lazy rend la récupération non bloquante.
- La fonction d’actualisation relance la récupération ; watch la relance lorsque les dépendances changent.
Questions Fréquemment Posées
La leçon « Récupération des données : useFetch et useAsyncData » est-elle gratuite ?
Oui — le texte complet de « Récupération des données : useFetch et useAsyncData » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Récupération des données : useFetch et useAsyncData » ?
useFetch(), useAsyncData(), récupération côté serveur ou côté client, refresh() et état en attente Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Récupération des données : useFetch et useAsyncData » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Structure d’un projet Nuxt 3 et routage fondé sur les fichiers
- Récupération des données : useFetch et useAsyncData
- Routes serveur et points de terminaison d’API Nuxt
- Modes SSR, SSG et SPA