Gestion des erreurs et intercepteurs globaux
Gérez les erreurs de requête et configurez les intercepteurs d’Axios.
Gestion des erreurs et intercepteurs globaux est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. 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 3 leçons au total.
Les requêtes peuvent échouer
Les réseaux peuvent se couper, les serveurs renvoyer des erreurs et les jetons expirer. Les applications robustes anticipent les échecs et réagissent avec élégance au lieu de se bloquer ou de laisser l'utilisateur regarder indéfiniment un indicateur de chargement.
Utiliser try/catch autour des requêtes
Entourez les requêtes attendues de try/catch pour intercepter les erreurs. Axios lève une erreur lorsque le serveur répond avec un statut 4xx ou 5xx.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Examiner l'erreur
Une erreur Axios contient des informations utiles. error.response existe lorsque le serveur a répondu ; son absence indique généralement un problème réseau ou un dépassement du délai d'attente.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Suivre l'état d'erreur
Stockez un message d'erreur dans l'état réactif afin que le modèle puisse l'afficher à l'utilisateur.
data() {
return { posts: [], loading: false, error: null }
}Définir l'erreur
Réinitialisez l'erreur avant chaque requête, puis renseignez-la dans le bloc catch.
async fetchPosts() {
this.loading = true
this.error = null
try {
this.posts = (await api.get("/posts")).data
} catch (err) {
this.error = "Could not load posts. Please try again."
} finally {
this.loading = false
}
}Afficher les messages d'erreur
Affichez l'erreur dans le modèle afin que les utilisateurs comprennent ce qui s'est passé et sachent quoi faire ensuite.
<template>
<p v-if="loading">Loading...</p>
<p v-else-if="error" class="error">{{ error }}</p>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>Que sont les intercepteurs ?
Les intercepteurs Axios vous permettent d'exécuter automatiquement du code pour chaque requête ou réponse. Ils sont parfaits pour les préoccupations transversales, comme l'ajout de jetons ou la gestion centralisée des erreurs.
Intercepteurs de requête
Un intercepteur de requête s'exécute avant l'envoi de chaque requête. Utilisez-le pour ajouter globalement un en-tête d'authentification.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Intercepteurs de réponse
Un intercepteur de réponse s'exécute après l'arrivée de chaque réponse. Il reçoit deux fonctions de rappel : l'une pour les réussites et l'autre pour les erreurs.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Gestion globale des erreurs
Centraliser la logique des erreurs dans un intercepteur de réponse permet de conserver des composants individuels propres. Les cas courants, comme 401 (déconnexion) ou 500 (affichage d'une notification), sont gérés au même endroit.
api.interceptors.response.use(
res => res,
error => {
const status = error.response ? error.response.status : null
if (status === 401) logout()
if (status >= 500) showToast("Server error, try later")
return Promise.reject(error)
}
)Logique simple de nouvelle tentative
Pour les réseaux instables, vous pouvez réessayer une requête échouée un nombre limité de fois avant d'abandonner.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Vérification rapide
Vérifiez vos connaissances sur la gestion des erreurs et les intercepteurs.
Récapitulatif
Entourez les requêtes de try/catch, affichez un message convivial dans l'interface à partir de error et examinez error.response pour distinguer les échecs du serveur des échecs réseau. Les intercepteurs centralisent les préoccupations : les intercepteurs de requête ajoutent les jetons, ceux de réponse gèrent les erreurs globales et un petit assistant de nouvelle tentative renforce la fiabilité. Vous allez maintenant optimiser les performances de l'application.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Gestion des erreurs et intercepteurs globaux » est-elle gratuite ?
Oui — le texte complet de « Gestion des erreurs et intercepteurs globaux » 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 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Gestion des erreurs et intercepteurs globaux » ?
Gérez les erreurs de requête et configurez les intercepteurs d’Axios. 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 3.
Combien de temps prend la leçon « Gestion des erreurs et intercepteurs globaux » ?
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
- Requêtes HTTP avec Axios
- Hooks de cycle de vie et récupération des données
- Gestion des erreurs et intercepteurs globaux