Gérer les erreurs et les codes d’état
Vérifiez response.ok et gérez les échecs.
Gérer les erreurs et les codes d’état est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
La fonction de récupération ne rejette pas les erreurs HTTP
Un piège surprenant : la fonction fetch ne rejette la promesse qu’en cas de défaillance réseau. Une réponse 404 ou 500 est tout de même résolue avec succès. Vous devez vérifier le statut vous-même.
Vérifier response.ok
response.ok vaut true uniquement pour les codes de statut compris entre 200 et 299. Utilisez-le pour détecter les erreurs HTTP.
const response = await fetch(url);
if (!response.ok) {
console.log("HTTP error:", response.status);
}Lire le code de statut
response.status fournit le code numérique et response.statusText un court message. Utilisez-les pour traiter des cas particuliers.
if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");Lever une erreur pour un mauvais statut
Une approche claire consiste à lever une erreur lorsque la réponse n’est pas correcte, afin qu’un seul catch traite les défaillances réseau et HTTP.
if (!response.ok) {
throw new Error("Request failed: " + response.status);
}Entourer de try/catch
Avec async/await, entourez tout le flux d’un try/catch. Les erreurs réseau rejettent la promesse et arrivent dans catch ; votre erreur HTTP levée y arrive également.
try {
const res = await fetch(url);
if (!res.ok) throw new Error("Status " + res.status);
const data = await res.json();
} catch (err) {
console.log("Failed:", err.message);
}Distinguer les types d’erreurs
Une récupération rejetée signifie généralement que le serveur était inaccessible, que le DNS a échoué ou que le CORS l’a bloquée. Une réponse incorrecte signifie que le serveur a répondu, mais avec une erreur. Traitez ces cas différemment lorsque c’est important.
Lire les corps d’erreur
Les API renvoient souvent du JSON décrivant l’erreur. Lisez-le avant de lever l’erreur afin de pouvoir afficher un message utile.
if (!res.ok) {
const errBody = await res.json().catch(() => ({}));
throw new Error(errBody.message || ("Status " + res.status));
}Codes de statut courants
Connaissez les familles : 2xx succès, 3xx redirection, 4xx erreur du client (vous avez envoyé quelque chose d’incorrect), 5xx erreur du serveur (le problème vient de leur côté). La fonction de récupération suit automatiquement la plupart des redirections.
Un assistant réutilisable
Centralisez la vérification dans un seul assistant afin que chaque appel bénéficie d’une gestion cohérente des erreurs.
async function getJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
}Réessayer après des défaillances temporaires
Sur des réseaux instables, vous pouvez réessayer en cas d’erreurs 5xx ou réseau. Limitez le nombre de tentatives et ajoutez un délai pour éviter de surcharger le serveur.
for (let i = 0; i < 3; i++) {
try { return await getJSON(url); }
catch (e) { if (i === 2) throw e; }
}Afficher l’erreur à l’utilisateur
Interceptez les erreurs au niveau de l’interface pour afficher un message convivial plutôt qu’un écran vide. Ne laissez jamais un rejet non traité faire disparaître silencieusement une requête échouée.
getJSON(url)
.then(render)
.catch(() => showToast("Could not load data"));Vérification rapide
Gestion des erreurs de la fonction de récupération.
Récapitulatif
La fonction de récupération ne rejette que les défaillances réseau : vérifiez donc toujours response.ok/response.status et levez une erreur pour les mauvais statuts. Entourez les appels de try/catch, lisez les corps d’erreur pour obtenir des messages, centralisez la vérification dans un assistant et affichez des erreurs conviviales dans l’interface.
Questions Fréquemment Posées
La leçon « Gérer les erreurs et les codes d’état » est-elle gratuite ?
Oui — le texte complet de « Gérer les erreurs et les codes d’état » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gérer les erreurs et les codes d’état » ?
Vérifiez response.ok et gérez les échecs. Tu pratiques JavaScript 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 JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript 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 « Gérer les erreurs et les codes d’état » ?
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 JavaScript Academy ?
Oui. Chaque leçon JavaScript 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
- Effectuer des requêtes GET
- POST et envoi de données
- Gérer les erreurs et les codes d’état
- Interrompre des requêtes avec AbortController