API en React

Par kaugustin, 22 mars, 2025
React

Bonjour à tous et bienvenue dans ce septième article sur React.js !Aujourd’hui, nous allons voir les API en React. On va apprendre à comprendre les appels API, utiliser Axios, et créer un hook personnalisé.

On peut affirmer que de nos jours, les applications web ne sont plus isolées elles communiquent en permanence avec des services distants grâce aux API. Que ce soit pour afficher des utilisateurs, récupérer des données météo ou publier des contenus, les appels API sont essentiels dans toute les application React moderne.

Les appels API

Une API est un point d’entrée vers un service externe. En React, on envoie des requêtes HTTP vers une URL pour obtenir ou envoyer des données.

Les types de requêtes que l’on peut avoir sont :

GET pour récupérer des infos

POST pour en créer

PUT/PATCH pour modifier

DELETE pour supprimer

En React, on utilise souvent la fonction fetch() pour ces appels.

useEffect(() => {
  // On utilise fetch pour envoyer une requête GET à l'API
  fetch("https://jsonplaceholder.typicode.com/users")

    // Une fois la réponse reçue, on la convertit en JSON
    .then(res => res.json())

    // On récupère les données et on les stocke dans le state
    .then(data => setUtilisateurs(data))

    // En cas d'erreur, on l'affiche dans la console
    .catch(err => console.error(err));

}, []);

Dans ce code, on effectue une requête GET vers une API qui fournit une liste d'utilisateurs. Une fois les données récupérées, elles sont stockées dans l’état utilisateurs, ce qui permet de les afficher ensuite dans le composant.

Axios

Axios est une librairie qui facilite la gestion des appels HTTP en JavaScript. Elle offre une syntaxe plus simple, une gestion automatique des données JSON, et plus de contrôle sur les en-têtes et les erreurs.

Tout d’abord, pour utiliser Axios, il faut l’installer avec la commande suivante :

npm install axios

Voici un exemple d’utilisation :


// On importe la bibliothèque Axios
import axios from "axios";

useEffect(() => {
  // On envoie une requête GET à l'API
  axios.get("https://jsonplaceholder.typicode.com/users")

    // Si la requête réussit, on stocke les données dans le state 'utilisateurs'
    .then(res => setUtilisateurs(res.data))

    // Si une erreur survient, on l'affiche dans la console
    .catch(err => console.error(err));

}, []);

Dans ce code, on utilise Axios pour récupérer une liste d’utilisateurs depuis une API. Une fois les données reçues, elles sont enregistrées dans un state.

Les raisons pour lesquelles Axios est souvent le plus préféré sont :

Le code est plus lisible que fetch

La Gestion automatique du JSON

Le Support des interceptors

Hook personnalisé

Lorsqu’on travaille avec des appels API dans plusieurs composants React, on remarque rapidement que la logique d’appel avec fetch ou axios se répète souvent.Pour éviter cela et réutiliser du code proprement, on peut créer un hook personnalisé. Cela permet d’utiliser la logique des appels API dans une seule fonction, tout en gardant le code clair.

Voici comment créer un hook personnalisé :


import { useState, useEffect } from "react";
import axios from "axios";

// Ce hook prend une URL en paramètre et effectue une requête GET
function useFetch(url) {
  // State pour stocker les données récupérées
  const [data, setData] = useState(null);

  // State pour gérer l'état de chargement
  const [chargement, setChargement] = useState(true);

  // State pour gérer les erreurs éventuelles
  const [erreur, setErreur] = useState(null);

  useEffect(() => {
    // On démarre le chargement
    setChargement(true);

    // On fait l’appel API avec axios
    axios.get(url)
      .then(res => {
        // Si la requête réussit, on stocke les données dans le state
        setData(res.data);
      })
      .catch(err => {
        // Si une erreur se produit, on la stocke dans le state
        setErreur(err.message);
      })
      .finally(() => {
        setChargement(false);
      });
  }, [url]);

  // On retourne les états pour pouvoir les utiliser dans le composant
  return { data, chargement, erreur };
}

Une fois que ton hook est fait, tu peux maintenant l’utiliser partout dans l’application en passant simplement une URL, sans avoir à réécrire la logique à chaque fois.

Pour conclure,Les appels API sont au cœur du développement web moderne, et savoir les utiliser efficacement dans React est une compétence incontournable.Que ce soit avec fetch ou grâce à des outils plus puissants comme Axios, il est essentiel de comprendre comment interagir avec des services externes.Avec les hooks personnalisés, tu peux rendre ton code plus propre, plus réutilisable et plus maintenable. Voilà ce qui conclut ma série de blogs sur React.J’espère que ces articles vous ont aidé à voir plus clair et à mieux comprendre React.Merci de m’avoir suivi jusqu’ici!

Références:

FreeCodeCamp. How to use Axios with React. https://www.freecodecamp.org/news/how-to-use-axios-with-react/#heading-how-to-set-up-axios-with-react (Consulté le 19 mars 2025)

Awofesobi, P. (n.d.). Axios in React JS. Medium. https://medium.com/@awofesobipeace/axios-in-react-js-f5a0cd821694 (Consulté le 19 mars 2025)

React. (n.d.). Hooks API Reference. ReactJS. https://legacy.reactjs.org/docs/hooks-reference.html (Consulté le 21 mars 2025)

Étiquettes

Commentaires