Comprendre une requête fetch

Une page peut afficher des tâches enregistrées dans le navigateur, mais certaines données peuvent aussi venir d’un service distant. Avant de les utiliser, vous devez savoir si le serveur a répondu correctement. Dans cette leçon, vous envoyez une requête GET à une API de démonstration, contrôlez la réponse, puis lisez son contenu JSON.

Envoyer une requête avec fetch

La fonction fetch() demande une ressource à une adresse réseau et renvoie une promesse qui se résout avec un objet Response. Sans option particulière, la requête utilise la méthode GET : elle demande des données sans chercher à en créer ou en modifier. L’exemple ci-dessous vise l’API JSONPlaceholder, un service public de démonstration qui renvoie un objet représentant une tâche.

const adresse = "https://jsonplaceholder.typicode.com/todos/1";

fetch(adresse)
  .then(function (reponse) {
    console.log("Statut HTTP :", reponse.status);
    console.log("Réponse réussie :", reponse.ok);

    if (!reponse.ok) {
      console.error("Le serveur a renvoyé une réponse non réussie.");
      return null;
    }

    return reponse.json();
  })
  .then(function (tacheDistante) {
    if (tacheDistante === null) {
      return;
    }

    console.log("Tâche reçue :", tacheDistante);
    console.log("Titre :", tacheDistante.title);
    console.log("Terminée :", tacheDistante.completed);
  });

Dans la console, vous obtenez généralement un statut HTTP 200, puis un objet JSON contenant notamment les propriétés id, title, completed et userId. La valeur de completed peut varier selon les données renvoyées par le service.

Les fonctions passées à then() s’exécutent lorsque l’étape asynchrone précédente fournit son résultat. Ici, la première reçoit l’objet Response et décide si le corps doit être lu ; la seconde reçoit les données décodées lorsque la première a renvoyé la promesse créée par reponse.json(). Le chaînage permet donc de contrôler la réponse avant de consommer son contenu, sans bloquer l’exécution du reste de la page.

Vérifier le statut avant de lire le JSON

Une réponse HTTP fournit un code de statut, accessible avec reponse.status. La propriété booléenne reponse.ok vaut true pour les statuts de réussite, généralement ceux de 200 à 299. Une réponse 404, par exemple, reste une réponse reçue du serveur : fetch() ne la traite pas automatiquement comme un échec réseau. C’est pourquoi le code vérifie ok explicitement avant d’appeler json().

La méthode reponse.json() lit le corps de la réponse et tente d’en analyser le contenu comme du JSON. Elle renvoie elle aussi une promesse : les données ne sont pas disponibles immédiatement après l’appel. Si la réponse n’est pas réussie, l’exemple renvoie null et la seconde fonction s’arrête sans afficher de tâche. Pour une réponse réussie, l’objet obtenu comporte des propriétés fournies par l’API ; elles ne sont pas encore des tâches de votre état local.

Ce test réseau est volontairement indépendant de l’interface du gestionnaire : il ne modifie ni la liste de tâches ni le stockage du projet. Vous pouvez l’exécuter dans la console d’un navigateur connecté à Internet pour observer la réponse. Dans les prochaines étapes, vous structurerez ces opérations asynchrones, puis afficherez leur progression et leurs erreurs dans la page.

À retenir

• Sans option, fetch(adresse) effectue une requête GET.
• fetch() fournit un objet Response, qui expose notamment status et ok.
• Vérifiez reponse.ok avant d’appeler reponse.json().
• La lecture JSON est asynchrone et fournit les données dans l’étape suivante du chaînage.
• Une réponse HTTP non réussie n’est pas, à elle seule, une erreur réseau.