Gestion des Données avec React

L'API utilisée : JSONPlaceholder

Dans les exemples de ce tutoriel, nous utilisons une API publique appelée JSONPlaceholder. JSONPlaceholder est une API REST factice gratuite, conçue pour simuler des données réelles dans des applications de test et de démonstration. Elle fournit des endpoints pour des ressources telles que des articles, des utilisateurs, des commentaires et des albums.

Voici quelques caractéristiques de JSONPlaceholder :

• Facile à utiliser : Aucune authentification n'est requise, ce qui en fait un outil idéal pour les débutants.
• Endpoints disponibles : Vous pouvez accéder à des ressources comme /posts, /users, /comments, etc.
• Opérations CRUD : JSONPlaceholder prend en charge les opérations de création, lecture, mise à jour et suppression (CRUD), bien que les modifications ne soient pas réellement persistées.
• Données factices : Les données renvoyées sont générées automatiquement et sont parfaites pour tester des applications sans avoir besoin d'un backend réel.

Dans nos exemples, nous utilisons l'endpoint /posts pour récupérer une liste d'articles factices. Vous pouvez explorer d'autres endpoints en consultant la documentation officielle de JSONPlaceholder.

Utilisation de Fetch pour interagir avec une API

Fetch est une méthode native de JavaScript pour effectuer des requêtes HTTP. Elle est simple à utiliser et ne nécessite aucune installation supplémentaire. Voici un exemple complet d'utilisation de Fetch pour récupérer des données depuis une API :

📋 Copier le code

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

function App() {
// État pour stocker les données récupérées
const [data, setData] = useState(null);
// État pour gérer le chargement
const [loading, setLoading] = useState(true);
// État pour gérer les erreurs
const [error, setError] = useState(null);

// useEffect est utilisé pour effectuer la requête API au chargement du composant
useEffect(() => {
// Effectuer une requête GET à l'API
fetch('https://jsonplaceholder.typicode.com/posts')
	.then(response => {
		// Vérifier si la réponse est valide (statut 200-299)
		if (!response.ok) {
			throw new Error('Erreur réseau');
		}
		// Convertir la réponse en JSON
		return response.json();
	})
	.then(data => {
		// Mettre à jour l'état avec les données récupérées
		setData(data);
		// Indiquer que le chargement est terminé
		setLoading(false);
	})
	.catch(error => {
		// Capturer et gérer les erreurs
		setError(error.message);
		// Indiquer que le chargement est terminé (même en cas d'erreur)
		setLoading(false);
	});
}, []); // Le tableau vide [] signifie que cet effet ne s'exécute qu'une fois, au montage du composant

// Afficher un message de chargement si les données sont en cours de récupération
if (loading) return <div>Chargement...</div>;

// Afficher un message d'erreur si une erreur est survenue
if (error) return <div>Erreur : {error}</div>;

// Afficher les données récupérées
return (
<div>
	<h1>Liste des articles</h1>
	<ul>
		{data.map(post => (
			<li key={post.id}>{post.title}</li>
		))}
	</ul>
</div>
);
}

export default App;

Explication détaillée du code :

• useState :
  • data : Stocke les données récupérées depuis l'API.
  • loading : Indique si les données sont en cours de chargement.
  • error : Stocke les messages d'erreur en cas de problème.
• useEffect :
  • Ce hook est utilisé pour effectuer des effets secondaires, comme des requêtes API, au montage du composant.
  • Le tableau vide [] signifie que l'effet ne s'exécute qu'une seule fois, après le premier rendu.
• fetch :
  • Effectue une requête GET à l'URL spécifiée.
  • La méthode .then est utilisée pour traiter la réponse.
  • Si la réponse n'est pas valide (statut HTTP en dehors de 200-299), une erreur est levée.
• Gestion des erreurs :
  • Les erreurs sont capturées dans le bloc .catch.
  • Le message d'erreur est stocké dans l'état error et affiché à l'utilisateur.

Utilisation d'Axios pour interagir avec une API

Axios est une bibliothèque populaire pour effectuer des requêtes HTTP. Elle offre une syntaxe plus concise et des fonctionnalités supplémentaires, comme l'annulation de requêtes et la gestion automatique des erreurs réseau. Voici comment l'utiliser pour récupérer des données :

📋 Copier le code

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

function App() {
// État pour stocker les données récupérées
const [data, setData] = useState(null);
// État pour gérer le chargement
const [loading, setLoading] = useState(true);
// État pour gérer les erreurs
const [error, setError] = useState(null);

// useEffect est utilisé pour effectuer la requête API au chargement du composant
useEffect(() => {
// Effectuer une requête GET à l'API avec Axios
axios.get('https://jsonplaceholder.typicode.com/posts')
	.then(response => {
		// Mettre à jour l'état avec les données récupérées
		setData(response.data);
		// Indiquer que le chargement est terminé
		setLoading(false);
	})
	.catch(error => {
		// Capturer et gérer les erreurs
		setError(error.message);
		// Indiquer que le chargement est terminé (même en cas d'erreur)
		setLoading(false);
	});
}, []); // Le tableau vide [] signifie que cet effet ne s'exécute qu'une fois, au montage du composant

// Afficher un message de chargement si les données sont en cours de récupération
if (loading) return <div>Chargement...</div>;

// Afficher un message d'erreur si une erreur est survenue
if (error) return <div>Erreur : {error}</div>;

// Afficher les données récupérées
return (
<div>
	<h1>Liste des articles</h1>
	<ul>
		{data.map(post => (
			<li key={post.id}>{post.title}</li>
		))}
	</ul>
</div>
);
}

export default App;

Explication détaillée du code :

• axios.get :
  • Effectue une requête GET à l'URL spécifiée.
  • Axios gère automatiquement la conversion de la réponse en JSON, ce qui simplifie le code.
• Gestion des erreurs :
  • Les erreurs sont capturées dans le bloc .catch.
  • Axios fournit des messages d'erreur détaillés, ce qui facilite le débogage.
• Avantages d'Axios :
  • Syntaxe plus concise que Fetch.
  • Gestion automatique des erreurs réseau.
  • Possibilité d'annuler des requêtes en cours.

Gestion des erreurs lors des appels API

La gestion des erreurs est cruciale pour offrir une bonne expérience utilisateur. Voici comment gérer les erreurs avec Fetch et Axios :

Avec Fetch :

fetch('https://jsonplaceholder.typicode.com/invalid-url')
.then(response => {
if (!response.ok) {
	throw new Error('Erreur réseau');
}
return response.json();
})
.catch(error => {
console.error('Erreur :', error);
});

Avec Axios :

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
.catch(error => {
console.error('Erreur :', error.message);
});

Dans les deux cas, les erreurs sont capturées et gérées de manière appropriée. Avec Axios, les erreurs réseau sont automatiquement capturées, tandis qu'avec Fetch, vous devez vérifier manuellement le statut de la réponse.

Conclusion

Vous avez maintenant une solide compréhension de la gestion des données dans React. Pour continuer votre apprentissage, découvrez comment maîtriser le routage avancé avec React Router dans le chapitre suivant : Routage Avancé avec React Router.

N'hésitez pas à consulter nos autres tutoriels pour approfondir vos connaissances en React.