Tutoriel React — Chapitre 13

Plan du chapitre

• 1) Qu’est-ce qu’une API ?
• 2) La fonction fetch
• 3) fetch + useState + useEffect
• 4) Gestion du chargement
• 5) Gestion des erreurs
• 6) Affichage des données
• 7) Résumé
• 8) Exercice pratique

1) Qu’est-ce qu’une API ?

Une API (Application Programming Interface) est un service qui fournit des données, souvent au format JSON. Exemple : une API qui renvoie une liste d’utilisateurs.

2) La fonction fetch

fetch est une fonction JavaScript native pour faire des requêtes HTTP.

fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => res.json())
  .then(data => console.log(data));

3) fetch + useState + useEffect

import { useEffect, useState } from "react";

export default function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

4) Gestion du chargement

const [loading, setLoading] = useState(true);

useEffect(() => {
  fetch(url)
    .then(res => res.json())
    .then(data => {
      setUsers(data);
      setLoading(false);
    });
}, []);

5) Gestion des erreurs

const [error, setError] = useState(null);

fetch(url)
  .then(res => {
    if (!res.ok) throw new Error("Erreur API");
    return res.json();
  })
  .then(data => setUsers(data))
  .catch(err => setError(err.message));

6) Affichage des données

{loading && <p>Chargement...</p>}
{error && <p>Erreur : {error}</p>}
{!loading && !error && (
  <ul>
    {users.map(u => (
      <li key={u.id}>{u.name}</li>
    ))}
  </ul>
)}

7) Résumé

• Les API fournissent des données JSON
• fetch permet de récupérer ces données
• useEffect déclenche l’appel au chargement
• Il faut gérer chargement et erreurs

8) Exercice pratique

Appelez l’API https://jsonplaceholder.typicode.com/posts et affichez la liste des titres.