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.