Gestion des Données avec React : Maîtrisez Fetch et Axios

L'API de test utilisée : JSONPlaceholder pour vos applications React

Dans tous les exemples pratiques de ce tutoriel, nous utilisons une API REST publique gratuite appelée JSONPlaceholder. JSONPlaceholder est une API REST factice (fake REST API) gratuite et open-source, spécialement conçue pour simuler des données réelles dans des applications de test, de démonstration et de prototypage. Elle fournit des endpoints RESTful pour différentes ressources telles que des articles (posts), des utilisateurs (users), des commentaires (comments), des albums (albums) et des photos (photos).

Voici les principales caractéristiques et avantages de JSONPlaceholder pour apprendre React :

• Facile à utiliser et gratuite : Aucune authentification, clé API ou inscription n'est requise, ce qui en fait un outil idéal pour les débutants souhaitant apprendre les requêtes HTTP dans React
• Endpoints disponibles variés : Vous pouvez accéder à des ressources comme /posts (articles), /users (utilisateurs), /comments (commentaires), /albums (albums), /photos (photos) et /todos (tâches)
• Opérations CRUD complètes : JSONPlaceholder prend en charge toutes les opérations CRUD (Create, Read, Update, Delete) avec les méthodes HTTP GET, POST, PUT, PATCH et DELETE, bien que les modifications ne soient pas réellement persistées sur le serveur
• Données factices réalistes : Les données JSON renvoyées sont générées automatiquement avec une structure cohérente, parfaites pour tester des applications React sans avoir besoin de configurer un backend réel ou une base de données
• Réponses HTTP rapides : L'API répond rapidement, ce qui permet de tester efficacement la gestion des états asynchrones dans React

Dans nos exemples de code, nous utilisons principalement l'endpoint /posts pour récupérer une liste d'articles factices au format JSON. Chaque article possède les propriétés suivantes : userId, id, title et body. Vous pouvez explorer d'autres endpoints et tester différentes requêtes HTTP en consultant la documentation officielle complète de JSONPlaceholder.

Utilisation de Fetch API pour interagir avec une API REST dans React

Fetch API est une interface JavaScript moderne et native pour effectuer des requêtes HTTP asynchrones. Introduite dans ES6, elle remplace l'ancienne méthode XMLHttpRequest et offre une syntaxe plus simple basée sur les Promesses JavaScript. Fetch est directement disponible dans tous les navigateurs modernes et ne nécessite aucune installation de dépendance ou de bibliothèque externe, ce qui en fait un excellent choix pour les projets React légers.

Voici un exemple complet et commenté d'utilisation de Fetch dans un composant React fonctionnel pour récupérer des données depuis une API REST :

📋 Copier le code

import React, { useEffect, useState } from 'react';

function App() {
// État local pour stocker les données d'articles récupérées depuis l'API
const [data, setData] = useState(null);

// État local pour gérer l'indicateur de chargement pendant la requête HTTP
const [loading, setLoading] = useState(true);

// État local pour stocker et afficher les messages d'erreur éventuels
const [error, setError] = useState(null);

// useEffect est un hook React utilisé pour effectuer des effets de bord
// Ici, nous l'utilisons pour effectuer la requête API au montage du composant
useEffect(() => {
// Effectuer une requête GET à l'API JSONPlaceholder avec Fetch
// fetch() retourne une Promesse qui se résout avec un objet Response
fetch('https://jsonplaceholder.typicode.com/posts')
	.then(response => {
		// Vérifier si la réponse HTTP est valide (statut 200-299)
		// response.ok est true si le statut est dans cette plage
		if (!response.ok) {
			// Lever une erreur si le statut HTTP indique un échec (404, 500, etc.)
			throw new Error('Erreur réseau : impossible de récupérer les données');
		}
		// Convertir le corps de la réponse en JSON
		// response.json() retourne également une Promesse
		return response.json();
	})
	.then(data => {
		// Mettre à jour l'état avec le tableau de données récupérées
		setData(data);
		// Désactiver l'indicateur de chargement car les données sont disponibles
		setLoading(false);
	})
	.catch(error => {
		// Capturer toutes les erreurs (réseau, JSON invalide, etc.)
		// et stocker le message d'erreur dans l'état
		setError(error.message);
		// Désactiver le chargement même en cas d'erreur pour arrêter le spinner
		setLoading(false);
	});
}, []); // Le tableau de dépendances vide [] garantit que l'effet ne s'exécute qu'une seule fois au montage

// Affichage conditionnel : message de chargement pendant la récupération des données
if (loading) return <div>Chargement en cours des articles...</div>;

// Affichage conditionnel : message d'erreur si la requête a échoué
if (error) return <div>Erreur lors du chargement : {error}</div>;

// Rendu principal : afficher la liste des articles récupérés depuis l'API
return (
<div>
	<h1>Liste des articles depuis JSONPlaceholder</h1>
	<ul>
		{/* Mapper chaque article du tableau data vers un élément de liste */}
		{data.map(post => (
			{/* Utiliser post.id comme clé unique pour optimiser le rendu React */}
			<li key={post.id}>{post.title}</li>
		))}
	</ul>
</div>
);
}

export default App;

Explication détaillée et pédagogique du code Fetch dans React :

• Hook useState pour la gestion des états :
  • data : Variable d'état qui stocke le tableau de données JSON récupérées depuis l'API. Initialisé à null avant le chargement
  • loading : Booléen qui indique si les données sont en cours de chargement. Permet d'afficher un indicateur de chargement (spinner) à l'utilisateur
  • error : Stocke les messages d'erreur HTTP ou réseau en cas de problème lors de la requête
• Hook useEffect pour les effets de bord :
  • Ce hook React est utilisé pour effectuer des effets secondaires (side effects) comme des requêtes API, des abonnements ou des manipulations du DOM
  • Le tableau de dépendances vide [] signifie que l'effet ne s'exécute qu'une seule fois, après le premier rendu du composant React (équivalent à componentDidMount dans les composants de classe)
  • C'est l'endroit idéal pour déclencher des appels API au chargement d'un composant
• Méthode fetch() native JavaScript :
  • Effectue une requête HTTP GET asynchrone vers l'URL spécifiée de l'API REST
  • Retourne une Promesse JavaScript qui se résout avec un objet Response contenant la réponse du serveur
  • La méthode .then() est utilisée pour chaîner le traitement de la réponse de manière asynchrone
  • Si la réponse n'est pas valide (statut HTTP en dehors de 200-299), une erreur est levée avec throw new Error()
  • La méthode response.json() convertit le corps de la réponse en objet JavaScript exploitable
• Gestion robuste des erreurs HTTP :
  • Les erreurs sont capturées dans le bloc .catch() qui intercepte toutes les erreurs de la chaîne de Promesses
  • Le message d'erreur est stocké dans l'état error via setError() et affiché clairement à l'utilisateur
  • Avec Fetch, vous devez vérifier manuellement response.ok car Fetch ne rejette les Promesses que pour les erreurs réseau, pas pour les erreurs HTTP
• Rendu conditionnel pour l'expérience utilisateur :
  • Utilisation des instructions conditionnelles if pour afficher différents contenus selon l'état de la requête
  • Affichage d'un message de chargement pendant que les données sont récupérées
  • Affichage d'un message d'erreur explicite si la requête échoue
  • Affichage des données formatées une fois la requête réussie

Utilisation d'Axios pour interagir avec une API REST dans React

Axios est une bibliothèque JavaScript HTTP très populaire et puissante pour effectuer des requêtes vers des APIs REST. Elle offre de nombreux avantages par rapport à Fetch API native : une syntaxe plus concise et élégante, des fonctionnalités avancées comme l'annulation de requêtes, la gestion automatique des erreurs réseau, les intercepteurs de requêtes et réponses, et la transformation automatique des données JSON.

Pour utiliser Axios dans votre projet React, vous devez d'abord l'installer via npm ou yarn :

npm install axios

ou

yarn add axios

Voici comment utiliser Axios dans un composant React fonctionnel pour récupérer des données depuis une API REST avec une gestion complète des états :

📋 Copier le code

import React, { useEffect, useState } from 'react';
import axios from 'axios'; // Importer la bibliothèque Axios pour les requêtes HTTP

function App() {
// État local pour stocker le tableau d'articles récupérés depuis l'API REST
const [data, setData] = useState(null);

// État local pour gérer l'affichage de l'indicateur de chargement (spinner)
const [loading, setLoading] = useState(true);

// État local pour stocker les messages d'erreur HTTP ou réseau
const [error, setError] = useState(null);

// useEffect permet d'effectuer la requête API au montage du composant
// C'est ici que nous appelons l'API de manière asynchrone
useEffect(() => {
// Effectuer une requête HTTP GET avec Axios vers l'API JSONPlaceholder
// axios.get() retourne une Promesse qui se résout avec un objet contenant la réponse
axios.get('https://jsonplaceholder.typicode.com/posts')
	.then(response => {
		// Avec Axios, les données JSON sont automatiquement parsées
		// et disponibles dans response.data (pas besoin de .json())
		setData(response.data);
		// Désactiver l'indicateur de chargement car les données sont chargées
		setLoading(false);
	})
	.catch(error => {
		// Axios capture automatiquement les erreurs réseau et HTTP (4xx, 5xx)
		// Stocker le message d'erreur détaillé dans l'état
		setError(error.message);
		// Désactiver le chargement pour arrêter le spinner même en cas d'erreur
		setLoading(false);
	});
}, []); // Tableau de dépendances vide : l'effet s'exécute une seule fois au montage

// Rendu conditionnel : afficher un message de chargement pendant la requête
if (loading) return <div>Chargement des données en cours...</div>;

// Rendu conditionnel : afficher l'erreur si la requête a échoué
if (error) return <div>Erreur survenue : {error}</div>;

// Rendu principal : afficher la liste complète des articles
return (
<div>
	<h1>Liste des articles récupérés avec Axios</h1>
	<ul>
		{/* Parcourir le tableau data avec map() pour générer les éléments de liste */}
		{data.map(post => (
			{/* Chaque élément doit avoir une prop key unique (ici post.id) */}
			<li key={post.id}>{post.title}</li>
		))}
	</ul>
</div>
);
}

export default App;

Explication détaillée et technique du code Axios dans React :

• Méthode axios.get() pour les requêtes HTTP :
  • Effectue une requête HTTP GET asynchrone vers l'URL spécifiée de l'API REST
  • Axios gère automatiquement la conversion de la réponse en objet JavaScript, contrairement à Fetch qui nécessite response.json()
  • Les données sont directement accessibles via response.data, ce qui simplifie considérablement le code
  • Axios supporte nativement les méthodes HTTP : GET, POST, PUT, PATCH, DELETE avec des méthodes dédiées
• Gestion automatique des erreurs HTTP :
  • Les erreurs sont automatiquement capturées dans le bloc .catch() sans vérification manuelle du statut
  • Axios rejette la Promesse pour tous les codes de statut HTTP d'erreur (4xx et 5xx), contrairement à Fetch
  • Axios fournit des messages d'erreur détaillés et structurés via error.message, error.response et error.request, facilitant le débogage
• Avantages principaux d'Axios sur Fetch API :
  • Syntaxe plus concise et lisible : moins de code boilerplate nécessaire
  • Gestion automatique des erreurs réseau et HTTP : pas besoin de vérifier response.ok manuellement
  • Transformation automatique des données JSON : pas besoin d'appeler .json() explicitement
  • Support natif de l'annulation de requêtes avec les CancelTokens ou AbortController
  • Intercepteurs de requêtes et réponses : permet d'ajouter des headers, tokens d'authentification ou de transformer les données globalement
  • Timeout configurables : possibilité de définir un délai maximal pour les requêtes
  • Protection XSRF/CSRF intégrée : sécurité renforcée pour les applications web
  • Support des anciennes versions de navigateurs : fonctionne sur IE11 contrairement à Fetch
• Configuration avancée possible avec Axios :
  • Création d'instances Axios personnalisées avec des configurations par défaut (baseURL, headers, timeout)
  • Utilisation d'intercepteurs pour logger les requêtes, ajouter des tokens JWT automatiquement, gérer le rafraîchissement de tokens
  • Configuration de retry automatique en cas d'échec réseau temporaire

Gestion avancée des erreurs lors des appels API dans React

La gestion robuste des erreurs HTTP est absolument cruciale pour offrir une expérience utilisateur professionnelle et fiable dans vos applications React. Une bonne gestion d'erreurs permet d'informer clairement l'utilisateur des problèmes rencontrés, de faciliter le débogage pendant le développement, et d'améliorer la résilience de votre application face aux problèmes réseau ou serveur.

Voici comment implémenter une gestion d'erreurs complète avec Fetch API et Axios dans vos composants React :

Gestion des erreurs avec Fetch API dans React :

Avec Fetch, vous devez vérifier manuellement le statut HTTP de la réponse car Fetch ne rejette les Promesses que pour les erreurs réseau (pas de connexion, DNS échoué, etc.), pas pour les erreurs HTTP comme 404 ou 500 :

📋 Copier le code

// Exemple de gestion complète des erreurs avec Fetch API
fetch('https://jsonplaceholder.typicode.com/invalid-url')
.then(response => {
// Vérifier si le statut HTTP indique un succès (200-299)
if (!response.ok) {
	// Lever une erreur avec un message personnalisé incluant le statut
	throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}`);
}
// Parser la réponse JSON si le statut est OK
return response.json();
})
.then(data => {
// Traiter les données récupérées avec succès
console.log('Données reçues:', data);
})
.catch(error => {
// Capturer et logger toutes les erreurs (réseau ou HTTP)
console.error('Erreur lors de la requête Fetch:', error.message);
// Ici vous pouvez également mettre à jour un état React pour afficher l'erreur
});

Gestion des erreurs avec Axios dans React :

Avec Axios, la gestion des erreurs est simplifiée et plus puissante car Axios rejette automatiquement les Promesses pour tous les codes de statut d'erreur HTTP (4xx et 5xx) :

📋 Copier le code

// Exemple de gestion avancée des erreurs avec Axios
axios.get('https://jsonplaceholder.typicode.com/invalid-url')
.then(response => {
// Les données sont automatiquement disponibles dans response.data
console.log('Données reçues:', response.data);
})
.catch(error => {
// Axios fournit des informations détaillées sur l'erreur
if (error.response) {
	// Le serveur a répondu avec un code d'erreur (4xx, 5xx)
	console.error('Erreur HTTP:', error.response.status);
	console.error('Message:', error.response.data);
	console.error('Headers:', error.response.headers);
} else if (error.request) {
	// La requête a été envoyée mais aucune réponse n'a été reçue
	// Cela indique généralement un problème réseau
	console.error('Erreur réseau: Aucune réponse du serveur', error.request);
} else {
	// Une erreur s'est produite lors de la configuration de la requête
	console.error('Erreur de configuration:', error.message);
}
// Afficher toutes les informations disponibles sur l'erreur
console.error('Configuration complète:', error.config);
});

Meilleures pratiques pour la gestion d'erreurs dans React :

• Toujours gérer les trois états : chargement (loading), succès (data) et erreur (error) dans vos composants React
• Afficher des messages d'erreur clairs et compréhensibles pour l'utilisateur final, pas seulement les messages techniques
• Logger les erreurs détaillées dans la console pour faciliter le débogage en développement
• Implémenter des mécanismes de retry pour les erreurs réseau temporaires
• Utiliser des Error Boundaries React pour capturer les erreurs au niveau des composants
• Centraliser la gestion des erreurs avec des intercepteurs Axios ou des wrappers personnalisés pour Fetch
• Différencier les types d'erreurs : erreurs réseau (pas de connexion), erreurs serveur (500), erreurs client (404, 401), erreurs de validation

Dans les deux cas (Fetch et Axios), les erreurs sont capturées et gérées de manière appropriée. Avec Axios, les erreurs réseau et HTTP sont automatiquement capturées et structurées de manière détaillée via l'objet error, tandis qu'avec Fetch, vous devez vérifier manuellement le statut de la réponse avec response.ok pour détecter les erreurs HTTP.

Envoi de données avec POST : créer des ressources via API REST

Au-delà de la simple récupération de données avec GET, il est essentiel de savoir comment envoyer des données vers une API pour créer, modifier ou supprimer des ressources. Voici comment effectuer une requête POST avec Fetch et Axios pour créer un nouvel article :

Exemple POST avec Fetch API :

📋 Copier le code

// Exemple d'envoi de données POST avec Fetch API
const nouveauArticle = {
  title: 'Mon nouvel article React',
  body: 'Contenu détaillé de l\'article sur la gestion des données',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  // Spécifier la méthode HTTP POST pour créer une nouvelle ressource
  method: 'POST',
  // Définir les headers HTTP pour indiquer le format des données envoyées
  headers: {
    'Content-Type': 'application/json',
  },
  // Convertir l'objet JavaScript en chaîne JSON avec JSON.stringify()
  body: JSON.stringify(nouveauArticle)
})
.then(response => {
  // Vérifier que la création s'est bien passée (statut 201 généralement)
  if (!response.ok) {
    throw new Error('Erreur lors de la création de l\'article');
  }
  return response.json();
})
.then(data => {
  // L'API retourne l'objet créé avec son nouvel ID
  console.log('Article créé avec succès:', data);
})
.catch(error => {
  console.error('Erreur POST:', error.message);
});

Exemple POST avec Axios :

📋 Copier le code

// Exemple d'envoi de données POST avec Axios (syntaxe simplifiée)
const nouveauArticle = {
  title: 'Mon nouvel article React',
  body: 'Contenu détaillé de l\'article sur la gestion des données',
  userId: 1
};

// Axios gère automatiquement la conversion en JSON et les headers
axios.post('https://jsonplaceholder.typicode.com/posts', nouveauArticle)
.then(response => {
  // Les données créées sont disponibles dans response.data
  console.log('Article créé avec succès:', response.data);
  console.log('Nouvel ID:', response.data.id);
})
.catch(error => {
  // Gestion automatique des erreurs HTTP et réseau
  console.error('Erreur lors de la création:', error.message);
});

Comme vous pouvez le constater, Axios simplifie grandement la syntaxe pour les requêtes POST en gérant automatiquement la sérialisation JSON et les headers appropriés.

Optimisation des performances : useCallback et useMemo pour les appels API

Lorsque vous travaillez avec des appels API dans React, il est important d'optimiser les performances pour éviter les re-rendus inutiles et les requêtes redondantes. Voici quelques techniques avancées :

Éviter les appels API multiples avec useEffect :

Assurez-vous que vos dépendances useEffect sont correctement définies pour éviter des boucles infinies de requêtes :

📋 Copier le code

// ❌ MAUVAISE PRATIQUE : Oublier le tableau de dépendances
// Cela provoque un appel API à chaque rendu du composant
useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => setData(data));
}); // Pas de tableau de dépendances = effet exécuté à chaque rendu

// ✅ BONNE PRATIQUE : Utiliser un tableau de dépendances vide
// L'appel API n'est effectué qu'une seule fois au montage du composant
useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => setData(data));
}, []); // Tableau vide = effet exécuté uniquement au montage

// ✅ BONNE PRATIQUE : Spécifier les dépendances nécessaires
// L'appel API est refait uniquement quand userId change
useEffect(() => {
  fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
    .then(res => res.json())
    .then(data => setData(data));
}, [userId]); // Re-exécuter l'effet quand userId change

Utiliser async/await pour une syntaxe plus lisible :

Au lieu d'enchaîner les .then(), vous pouvez utiliser async/await pour un code plus propre et plus facile à maintenir :

📋 Copier le code

// Exemple d'utilisation d'async/await dans useEffect pour plus de lisibilité
useEffect(() => {
  // Définir une fonction asynchrone à l'intérieur de useEffect
  const fetchData = async () => {
    try {
      // Activer l'indicateur de chargement
      setLoading(true);
      
      // Attendre la réponse de l'API avec await
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      
      // Vérifier le statut HTTP
      if (!response.ok) {
        throw new Error(`Erreur HTTP: ${response.status}`);
      }
      
      // Attendre la conversion en JSON
      const jsonData = await response.json();
      
      // Mettre à jour l'état avec les données
      setData(jsonData);
      setError(null);
    } catch (err) {
      // Capturer toutes les erreurs (réseau, JSON, HTTP)
      setError(err.message);
      setData(null);
    } finally {
      // Désactiver le chargement dans tous les cas (succès ou erreur)
      setLoading(false);
    }
  };
  
  // Appeler la fonction asynchrone
  fetchData();
}, []);

L'utilisation d'async/await avec try/catch/finally rend le code beaucoup plus lisible et permet une meilleure gestion des erreurs qu'avec les chaînes de Promesses.

Créer un hook personnalisé pour réutiliser la logique d'appel API

Pour éviter la duplication de code et suivre le principe DRY (Don't Repeat Yourself), vous pouvez créer un hook personnalisé React qui encapsule toute la logique de récupération de données :

📋 Copier le code

// Hook personnalisé réutilisable pour les appels API avec gestion complète des états
import { useState, useEffect } from 'react';

function useFetch(url) {
  // États pour gérer les données, le chargement et les erreurs
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fonction asynchrone pour récupérer les données
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        
        if (!response.ok) {
          throw new Error(`Erreur HTTP ${response.status}`);
        }
        
        const jsonData = await response.json();
        setData(jsonData);
        setError(null);
      } catch (err) {
        setError(err.message);
        setData(null);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]); // Re-exécuter si l'URL change

  // Retourner un objet contenant tous les états
  return { data, loading, error };
}

// Utilisation du hook personnalisé dans un composant
function App() {
  // Appeler le hook personnalisé avec l'URL de l'API
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return <div>Chargement...</div>;
  if (error) return <div>Erreur : {error}</div>;

  return (
    <div>
      <h1>Articles (via hook personnalisé)</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Ce hook personnalisé useFetch peut être réutilisé dans n'importe quel composant de votre application, ce qui améliore la maintenabilité et réduit la duplication de code.

Conclusion et prochaines étapes pour maîtriser React

Vous avez maintenant acquis une compréhension solide et approfondie de la gestion des données dans React. Vous savez comment effectuer des requêtes HTTP avec Fetch API et Axios, gérer les états asynchrones avec useState et useEffect, implémenter une gestion robuste des erreurs, optimiser les performances de vos appels API, et créer des hooks personnalisés réutilisables.

Ces compétences sont essentielles pour développer des applications React modernes et professionnelles qui interagissent avec des APIs REST, des backends Node.js, ou des services cloud. Vous êtes maintenant capable de construire des interfaces utilisateur dynamiques qui récupèrent, affichent, créent et modifient des données en temps réel.

Pour continuer votre apprentissage et maîtriser React de manière complète, découvrez comment implémenter le routage avancé et la navigation entre pages avec React Router dans le chapitre suivant : Routage Avancé avec React Router. Vous y apprendrez à créer des applications React multi-pages (SPA), gérer les paramètres d'URL, implémenter la navigation programmatique, protéger les routes avec authentification, et bien plus encore.

N'hésitez pas à consulter nos autres tutoriels React approfondis pour continuer à développer vos compétences en développement web moderne et devenir un expert React.

Par carabde | Mis à jour le 22 novembre 2025