JavaScript Fetch API

La Fetch API est une fonctionnalité clé de JavaScript qui vous permet d'effectuer des requêtes réseau (télécharger des données, soumettre des formulaires, communiquer avec des API) et retourne une Promise. C'est le remplaçant moderne de l'ancien XMLHttpRequest et elle s'associe naturellement avec async/await. Ce guide couvre les schémas courants : requêtes GET et POST, inspection de la réponse, lecture de JSON et de texte, envoi d'en-têtes et gestion des erreurs — en utilisant l'API JSONPlaceholder gratuite pour des exemples exécutables.

Comprendre la Fetch API

La Fetch API est conçue pour la communication réseau et utilise un système basé sur les promesses pour récupérer des ressources. Elle est suffisamment flexible pour gérer différents formats de données et des requêtes complexes, ce qui en fait un excellent choix pour développer des applications web.

La signature de base est fetch(url, options). Elle retourne une promesse qui se résout en un objet Response dès que le serveur répond avec les en-têtes — avant que le corps ait fini de se télécharger. Vous lisez ensuite le corps séparément avec une méthode telle que .json() ou .text(), chacune retournant sa propre promesse.

Un point critique à retenir : fetch() ne rejette qu'en cas d'échec réseau (pas de connexion, erreur DNS, blocage CORS). Elle ne rejette pas pour les codes d'erreur HTTP comme 404 ou 500 — ceux-ci se résolvent quand même avec succès. Vous devez vérifier response.ok (ou response.status) vous-même.

Utilisation de base de Fetch

Plongeons dans un exemple de base pour récupérer des données d'un article JSONPlaceholder :

Cet extrait récupère des données d'un article spécifique, illustrant comment Fetch retourne une promesse qui se résout en la réponse de la requête. La réponse est ensuite analysée en JSON et affichée dans la console.

Inspection de la réponse

L'objet Response contient des métadonnées utiles avant même que vous ne lisiez le corps. Les propriétés les plus importantes sont :

• response.ok — un boolean qui vaut true pour les codes de statut dans la plage 200–299.
• response.status — le code de statut HTTP numérique (par ex. 200, 404, 500).
• response.statusText — le message texte associé au statut (par ex. "OK").
• response.headers — un objet Headers que vous pouvez interroger avec .get().

Lecture du corps : .json() vs .text()

Le corps d'une réponse peut être lu dans plusieurs formats. Chaque méthode retourne une promesse et ne peut être appelée qu'une seule fois par réponse — le corps est un flux qui est consommé :

• response.json() — analyse le corps en JSON et se résout en un objet ou un array JavaScript.
• response.text() — se résout en le corps brut sous forme de string. Utile pour le texte simple, le HTML, ou quand vous souhaitez gérer vous-même l'analyse JSON.
• response.blob() — se résout en un Blob, pour les données binaires comme les images ou les fichiers.

Gestion des erreurs avec Fetch

La gestion des erreurs est essentielle lors de l'utilisation de requêtes réseau. Comme fetch() ne lève pas d'exception pour les codes d'erreur HTTP, le schéma standard consiste à vérifier response.ok et à lever votre propre erreur lorsqu'il vaut false. Voici un exemple intégrant la gestion des erreurs :

Dans cet exemple, nous vérifions si la réponse est réussie ; sinon, une erreur est levée. La méthode .catch() intercepte toutes les erreurs, préservant ainsi l'intégrité de l'application.

Implémentation d'une requête POST

La Fetch API ne se limite pas aux requêtes GET ; elle est tout aussi efficace pour gérer les requêtes POST afin d'envoyer des données à un serveur. Passez un second argument avec method, un body et des headers. Lors de l'envoi de JSON, vous devez à la fois sérialiser le corps avec JSON.stringify() et définir l'en-tête Content-Type pour que le serveur sache comment l'analyser. Voici comment créer un nouvel article avec JSONPlaceholder :

Cet extrait de code illustre l'envoi d'une requête POST avec des données JSON, en spécifiant la méthode, le corps et les en-têtes. Il démontre la polyvalence de la Fetch API pour gérer différents types de requêtes.

Envoi d'en-têtes de requête personnalisés

Les en-têtes permettent d'indiquer au serveur des informations sur la requête — le type de contenu, le format de réponse attendu, ou les identifiants d'authentification comme un jeton bearer. Vous pouvez passer des en-têtes sous forme d'objet simple, ou les construire avec la classe Headers pour plus de contrôle :

Remarque : une requête vers une autre origine ne réussira que si ce serveur l'autorise via CORS. Consultez Fetch : requêtes Cross-Origin pour comprendre comment les règles cross-origin affectent les en-têtes et les identifiants.

Utiliser Async/Await avec Fetch

Pour une approche plus élégante du code asynchrone, la Fetch API peut être combinée avec async et await. Cette méthode offre une syntaxe plus lisible, similaire au code synchrone :

En utilisant async et await, cet exemple récupère un article, attend la réponse et la traite dans un bloc try/catch pour la gestion des erreurs. Il illustre comment les fonctionnalités modernes de JavaScript peuvent simplifier l'utilisation de la Fetch API.

Gestion des erreurs avec Async/Await

Pour la gestion des erreurs avec async/await, on utilise généralement des blocs try-catch.

Pour gérer les erreurs qui peuvent survenir lors d'opérations asynchrones, vous pouvez encapsuler vos appels await dans un bloc try et intercepter les erreurs avec un bloc catch. Voici comment ajouter la gestion des erreurs à la fonction fetchData :

Propagation des erreurs

La propagation des erreurs désigne la façon dont une erreur « se déplace » ou est transmise d'une partie de votre programme à une autre. Imaginez-la comme le trajet qu'emprunte une erreur après qu'elle s'est produite. Lorsqu'une erreur survient, c'est comme lâcher une balle. La propagation des erreurs concerne l'endroit où va la balle après qu'elle est lâchée : quelqu'un l'attrape-t-il, ou tombe-t-elle par terre ?

En JavaScript, cela se produit généralement par le biais du chaînage de rejets de promesses, où un rejet non géré remonte la pile d'appels jusqu'à ce qu'un bloc catch ou un gestionnaire global l'intercepte.

Dans l'exemple ci-dessous, si vous souhaitez que les erreurs soient gérées par la fonction appelante (comme viewData), vous devez soit éviter de les intercepter dans fetchData, soit les relancer après les avoir interceptées :

Comme vous pouvez le constater, le même objet erreur est intercepté dans les deux fonctions car nous le relançons depuis fetchData vers viewData.

Sujets connexes

Pour aller plus loin avec la Fetch API, explorez ces chapitres connexes :

• JavaScript Promise — le fondement sur lequel Fetch est construit.
• Async/Await — la façon la plus propre d'écrire des appels Fetch.
• Fetch : Abandon — annuler une requête avec AbortController (utile pour les délais d'attente et la recherche à la frappe).
• Fetch : requêtes Cross-Origin — comment CORS contrôle les requêtes vers d'autres domaines.

Conclusion

La Fetch API est un outil indispensable pour les développeurs JavaScript, améliorant les applications web grâce à son approche basée sur les promesses pour les requêtes réseau. À travers des exemples pratiques, ce guide démontre comment la Fetch API peut être utilisée efficacement pour récupérer des données, gérer les erreurs et effectuer des requêtes POST, en s'appuyant sur l'API JSONPlaceholder pour des applications concrètes. Maîtriser la Fetch API permet aux développeurs de créer des applications web plus réactives, dynamiques et robustes.

Pratique