Des erreurs précises

Gérer les erreurs HTTP précisément

Lorsqu’une requête est envoyée vers un serveur, celui-ci retourne toujours un code de statut HTTP. Ce code indique si la requête a abouti ou, dans le cas contraire, la nature du problème rencontré. Exploiter ces codes permet d’afficher à l’utilisateur un message adapté à chaque situation, plutôt qu’un message générique peu informatif.

Les codes de statut HTTP

Les codes sont regroupés en familles :

• 2xx — la requête a réussi (200 OK, 201 Created)
• 4xx — une erreur provient du client (400, 401, 403, 404, 429)
• 5xx — une erreur provient du serveur (500, 503)

Lire le code de statut avec fetch

Par défaut, fetch ne génère pas d’exception en cas d’erreur HTTP. Une réponse 404 ou 500 est considérée comme une réponse valide. Il faut donc vérifier manuellement le code retourné :

javascript

const response = await fetch('https://api.exemple.com/data', {
  headers: { 'Authorization': 'Bearer MON_TOKEN' }
});

if (!response.ok) {
  console.log(response.status); // ex : 401
}

La propriété response.ok vaut true uniquement si le code est compris entre 200 et 299.

Afficher un message adapté à chaque erreur

javascript

async function appelAPI() {
  const response = await fetch('https://api.exemple.com/data', {
    headers: { 'Authorization': 'Bearer MON_TOKEN' }
  });

  if (!response.ok) {
    switch (response.status) {
      case 400:
        resultat.innerHTML = "La requête est mal formée.";
        break;
      case 401:
        resultat.innerHTML = "La clé API est invalide ou absente.";
        break;
      case 403:
        resultat.innerHTML = "Accès refusé : droits insuffisants.";
        break;
      case 404:
        resultat.innerHTML = "La ressource demandée est introuvable.";
        break;
      case 429:
        resultat.innerHTML = "Quota dépassé : trop de requêtes envoyées.";
        break;
      case 500:
        resultat.innerHTML = "Une erreur s'est produite côté serveur.";
        break;
      default:
        resultat.innerHTML = "Une erreur inattendue s'est produite.";
    }
    return;
  }

  const data = await response.json();
  // traitement normal de la réponse
}

Exploiter le message d’erreur retourné par l’API

De nombreuses APIs retournent également un objet JSON contenant un message d’erreur explicite. Il est possible de l’extraire pour compléter l’information affichée :

javascript

if (!response.ok) {
  const erreur = await response.json();
  console.log(erreur.message); // message fourni par l'API
  resultat.innerHTML = `Erreur ${response.status} : ${erreur.message}`;
  return;
}

Ce message varie selon les APIs : il convient de consulter leur documentation pour connaître la structure exacte de l’objet retourné en cas d’erreur.