useFetch : un composable de données asynchrones
Références data, loading et error, récupération au montage, fonction refetch et nettoyage avec AbortController
useFetch : un composable de données asynchrones est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Objectif de useFetch
La récupération asynchrone de données se répète partout : indicateurs de chargement, gestion des erreurs, requête elle-même. useFetch regroupe tout cela dans un composable réutilisable qui renvoie data, loading et error.
Les trois références réactives
Commencez par trois références qui décrivent l'état de toute requête asynchrone.
import { ref } from "vue";
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
}La routine de récupération
Écrivez une fonction asynchrone qui active loading, effectue la requête et enregistre le résultat. Nous améliorerons ensuite la gestion des erreurs.
async function execute() {
loading.value = true;
const res = await fetch(url);
data.value = await res.json();
loading.value = false;
}try / catch / finally
Entourez la requête afin que les erreurs aboutissent dans error et que loading soit toujours réinitialisé, qu'elle réussisse ou échoue, dans 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;
}
}Récupérer les données dans onMounted
Lancez la requête lorsque le composant est monté afin que les données se chargent automatiquement.
import { onMounted } from "vue";
onMounted(execute);Une fonction refetch
Exposez execute sous le nom de refetch afin que les composants appelants puissent recharger les données à la demande, après une modification ou depuis un bouton de nouvelle tentative.
return { data, loading, error, refetch: execute };AbortController pour le nettoyage
Si le composant est démonté pendant la requête, annulez la récupération pour éviter de définir l'état d'un composant détruit. Créez un AbortController et transmettez son signal.
const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });Annuler lors du démontage
Annulez la requête en cours dans onUnmounted. Ignorez l'erreur d'annulation qui en résulte dans le bloc de capture.
import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());Le useFetch complet
Une fois assemblé, le composable gère le chargement, les erreurs, le rechargement et le nettoyage dans une seule unité bien structurée.
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 };
}L'utiliser dans un composant
Les composants appelants affichent leur contenu en fonction des trois références : un indicateur de chargement pendant le chargement, un message d'erreur en cas d'échec et les données dans les autres cas.
const { data, loading, error } = useFetch("/api/posts");Structure du modèle
Utilisez l'état comme condition dans le modèle pour créer une expérience utilisateur complète.
<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>Vérification rapide
Quel est le rôle de AbortController dans useFetch ?
Récapitulatif
Vous avez créé useFetch(url), qui expose les références data, loading et error, effectue la récupération dans onMounted selon un modèle try/catch/finally, fournit une fonction refetch et nettoie un AbortController dans onUnmounted.
Questions Fréquemment Posées
La leçon « useFetch : un composable de données asynchrones » est-elle gratuite ?
Oui — le texte complet de « useFetch : un composable de données asynchrones » 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 « useFetch : un composable de données asynchrones » ?
Références data, loading et error, récupération au montage, fonction refetch et nettoyage avec AbortController 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 3 sur 4.
Combien de temps prend la leçon « useFetch : un composable de données asynchrones » ?
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
- Caractéristiques d’un bon composable
- useCounter : un composable simple
- useFetch : un composable de données asynchrones
- VueUse : la bibliothèque de composables