React - Bibliothèque Javascript pour le frontend

Auteur: Mohamed CHINY Durée necessaire pour le cours de React - Bibliothèque Javascript pour le frontend Niveau recommandé pour le cours de React - Bibliothèque Javascript pour le frontend Supports vidéo disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 8: Appel d'APIs externes dans une application React

Toutes les pages

Appel d’APIs externes dans une application React

Appels asynchrones d'une API

Dans une application React on appelle tout le temps des APIs externes afin de générer les données de l’application. En effet, React est avant tout une bibliothèque frontend. Donc son but principal consiste à générer des vues (ou interfaces) en Single Page. Autrement dit, React se contentera de préparer l’environnement qui permet de visualiser et intéragir avec les éléments de l’application. Cependant, les données même de cette dernière ne sont généralement pas intégrée depuis le début, sauf les données statiques comme les textes et les images par défaut.

Afin que l’application puisse intégrer de nouvelles données suite à l’action de l’utilisateur (ou juste à son chargement), on doit procéder aux appels d’APIs externes. Mais je pense que vous connaissez le refrain. On va donc faire appel soit à l’objet XMLHttpRequest d’AJAX (qui est un peu vieux mais il fonctionne toujours bien), ou bien l’API Fetch qui est une technique plus moderne.

Appel d'une API à l'aide de l'API Fetch

Supposons que notre API est située dans le serveur local à l'adresse https://localhost/API et qu'elle renferme un fichier JSON qui constitue notre source de données et dont le contenu est le suivant:
{
   "nom" : "Javascript",
   "nbrHeures" : 40
}
Vous pouvez spécifier l'adresse de votre API selon vos convenances. Cependant, si vous créez votre propre API, n'oubliez pas de spécifier les règles de CORS (Cross-Origin Resource Sharing) afin de permettre aux applications distantes de la consommer. En effet, l'application React et l'API à consommer tournent sur des serveur différents (ou au moins des ports différents), et sans les règles de CORS adéquates, l'API interdira tout accès distant.
On imagine maintenant, qu'au chargement de notre application, on souhaite afficher le message "Javascript" qui correspond la clé "non" de notre fichier JSON. L'affichage sera fait simplement dans la console. Vous avez sans doute compris qu'on aura besoin du hook useEffect.

Je propose le code suivant (en utilisant l'API Fetch):
import { useEffect } from "react";

function App() {
   useEffect(()=>{
      fetch('https://localhost/API')
      .then(response => response.json())
      .then(data => {
         console.log(data.nom);
      })
      .catch(error => {
         console.error(error);
      })
   },[])
   return (
      <></>
   );
}

export default App;
Si vous voulez afficher la réponse de l'API dans l'interface, alors il faut l'affecter à un state via le setter du state afin de forcer le rerendering.

Appels asynchrones à l'aide de la bibliothèque axios

Le module axios est une bibliothèque intégrée à React permettant de simplifier les appels asynchrones en se basant sur les promesses comme c'est la cas de l'API Fetch.

Pour utiliser axios il faut commencer par l'installer à la ligne de commande comme ceci:
npm install axios
Ensuite, nous allons juste adapter le code précédent en remplaçant Fetch par axios:
import { useEffect } from 'react';
import axios from 'axios';

function App() {
   useEffect(()=>{
      axios.get('https://localhost/API')
      .then(response => {
         console.log(response.data.nom);
      })
      .catch(error => {
         console.error(error);
      }
   },[])
   return (
      <></>
   );
}

export default App;
Si vous voulez exprimer une requête POST, PUT ou DELETE, vous pourrez passer les paramètres via un objet littéral exactement comme c'est le cas avec l'API Fetch.