Gestion asynchrone des erreurs dans les composables
try/catch dans les composables asynchrones, exposition de l’état d’erreur et logique de nouvelle tentative dans useFetch
Gestion asynchrone des erreurs dans les composables est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Erreurs dans les fonctions composables asynchrones
Les fonctions composables qui effectuent des requêtes ou exécutent un travail asynchrone ont besoin de leur propre stratégie de gestion des erreurs. Le principe : exposez une référence error afin que les consommateurs puissent réagir, tandis que la fonction asynchrone intercepte les défaillances en interne.
Exposer une référence d’erreur
Retournez une référence error avec les données et l’état de chargement. Les consommateurs l’observent pour afficher des messages.
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}try / catch dans les fonctions asynchrones
Dans la fonction asynchrone, encapsulez les appels attendus dans try/catch et stockez l’échec dans la référence d’erreur plutôt que de le laisser être levé sans être intercepté.
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}Réinitialiser l’état d’erreur
Effacez l’erreur précédente au début de chaque tentative afin que les anciens messages ne persistent pas après une nouvelle tentative réussie.
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}Une référence retryCount
Pour prendre en charge les nouvelles tentatives, suivez le nombre d’essais avec une référence retryCount. Incrémentez-la chaque fois que l’utilisateur réessaie.
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}Logique de nouvelle tentative automatique
Vous pouvez effectuer automatiquement de nouvelles tentatives jusqu’à une limite, en espaçant les essais. Arrêtez-vous dès que le nombre d’essais dépasse votre maximum.
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}Renvoyer l’API complète
Exposez les données, l’erreur, la fonction de nouvelle tentative et retryCount afin que le composant dispose de tout ce dont il a besoin.
return { data, error, retry, retryCount };Consommer l’erreur
Dans le composant, effectuez le rendu en fonction de la référence d’erreur et proposez un bouton de nouvelle tentative relié à la fonction exposée.
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>Erreurs de la fonction composable ou gestionnaire global
La gestion des erreurs au niveau de la fonction composable concerne les échecs attendus auxquels l’interface doit réagir, comme une requête échouée ou une erreur de validation. Le composant décide de la manière de les présenter.
Quand la barrière globale intervient
Le gestionnaire global et les barrières d’erreurs intercepte les erreurs inattendues et non gérées, comme les bogues de programmation ou les plantages du rendu. Ils constituent le filet de sécurité, et non le gestionnaire principal des échecs asynchrones prévisibles.
Choisir le bon niveau
Règle générale : gérez les erreurs asynchrones prévues dans la fonction composable avec une référence d’erreur ; laissez les erreurs réellement inattendues remonter jusqu’au gestionnaire global. Ainsi, les retours de l’interface restent locaux et la protection contre les plantages reste globale.
Vérification rapide
Où faut-il gérer les échecs asynchrones attendus, comme une récupération échouée ?
Récapitulatif
Vous avez appris que les fonctions composables asynchrones exposent une référence error, utilisent try/catch dans les fonctions asynchrones, prennent en charge les nouvelles tentatives avec une référence retryCount et une fonction de nouvelle tentative, et que les erreurs au niveau de la fonction composable gèrent les échecs attendus tandis que le gestionnaire global couvre les erreurs inattendues.
Questions Fréquemment Posées
La leçon « Gestion asynchrone des erreurs dans les composables » est-elle gratuite ?
Oui — le texte complet de « Gestion asynchrone des erreurs dans les composables » 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 « Gestion asynchrone des erreurs dans les composables » ?
try/catch dans les composables asynchrones, exposition de l’état d’erreur et logique de nouvelle tentative dans useFetch 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 4 sur 4.
Combien de temps prend la leçon « Gestion asynchrone des erreurs dans les composables » ?
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
- Hook de cycle de vie onErrorCaptured
- Composants de limite d’erreurs
- app.config.errorHandler pour les erreurs globales
- Gestion asynchrone des erreurs dans les composables