Connecter un API en React

Présentation

La semaine dernière, nous avons exploré les hooks qui permettent aux composants fonctionnels de bénéficier des mêmes fonctionnalités que les composants de classe. Durant cette semaine, nous allons découvrir comment utiliser ces hooks pour se connecter à des API REST et appeler des données, ainsi que les bibliothèques qui facilitent cette fonctionnalité.

Appel de l'API

Comme nous le savons déjà, React est une bibliothèque JavaScript conçue pour construire des applications à pages uniques (Single Page Applications, SPAs). Étant strictement orientée frontend, React nécessite une méthode pour se connecter à des API. Ce processus est communément appelé "Appel de l'API" (React API Call) et permet de faire des requêtes à une API, d'interagir avec celle-ci et d'échanger des informations. Il existe trois méthodes très populaires et largement utilisées dans React pour effectuer ces opérations :

1. XMLHttpRequest
2. Fetch API
3. Axios

XMLHttpRequest API

XMLHttpRequest est une API permettant d'envoyer des requêtes HTTP d'une page web à un serveur. C'est une API de bas niveau car elle ne fournit qu'un mécanisme élémentaire pour effectuer des requêtes HTTP, laissant au développeur la tâche d'analyser la réponse reçue et de gérer intégralement la requête.

Voici un exemple : 

const xhr = new XMLHttpRequest();  

xhr.open('GET', 'https://api.example.com/data');

xhr.onload = function() {   

   if (xhr.status === 200) {

       setData(JSON.parse(xhr.responseText));

   }

};

xhr.send();

Dans ce code, nous commençons par créer l'objet nécessaire pour effectuer des requêtes vers des serveurs web. À l'aide de la méthode open(), nous précisons le type de la requête (GET dans ce cas) et indiquons l'URL cible. Lorsque la requête est complétée avec succès, nous vérifions le statut HTTP. Si la réponse est positive, nous convertissons les données reçues en format JSON. Finalement, nous envoyons la requête configurée au serveur en utilisant la méthode send().

XMLHttpRequest est une API ancienne, présente depuis les débuts du web. Elle peut ne pas être très efficace, et les services ainsi que les fonctionnalités qu'elle offre sont assez limités. C'est pour cette raison qu'il est conseillé d'adopter des méthodes plus modernes, comme les deux suivantes: l'api Fetch et la librairie Axios.

Fetch API 

L'API Fetch est une interface moderne utilisée pour réaliser des requêtes HTTP, comme GET et POST, directement depuis le navigateur, en tirant parti des promesses JavaScript pour simplifier la gestion des requêtes et des réponses. Pour l'utiliser, il suffit d'appeler la méthode fetch() avec l'URL cible, puis de traiter la réponse.

Dans React, utiliser l'API Fetch pour faire des requêtes, comme récupérer des données, est simple. On le fait souvent avec useEffect, un outil de React pour les actions supplémentaires dans les composants. Fetch et React travaillent bien ensemble car ils utilisent tous deux des promesses, ce qui aide à rendre l'expérience utilisateur plus agréable.

Voici un exemple : 

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

function App() {

  const [data, setData] = useState(null);

  useEffect(() => {

    fetch('https://api.example.com/data')

      .then(response => response.json())

      .then(json => setData(json))

      .catch(error => console.error(error));

  }, []);

  return (

    <div>

      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}

    </div>

  );

}

Cet exemple définit un composant React nommé App qui récupère des données depuis une API externe et les affiche, ou affiche un message de chargement pendant que les données sont en cours de récupération. Comme on peut le constater, l'API Fetch offre la possibilité de convertir les données en format JSON et de gérer les erreurs de manière efficace.

Axios

Axios est une bibliothèque JavaScript très populaire et largement utilisée pour effectuer des requêtes HTTP depuis des navigateurs web et des applications Node.js. Elle offre une manière simple de gérer les opérations asynchrones et d'interagir avec les API. Elle prend en charge diverses méthodes HTTP, ce qui en fait une solution polyvalente pour de nombreuses applications. Axios permet de gérer les intercepteurs de requête et de réponse, donnant ainsi aux développeurs la possibilité de modifier et manipuler les requêtes et les réponses de manière globale. De plus, elle analyse automatiquement les données JSON et propose des fonctionnalités telles que l'annulation de requêtes et la gestion des délais d'attente.

Remarque :  

Axios permet la réalisation d'opérations CRUD (créer, lire, mettre à jour et supprimer).

voici un exemple pour la creation d'un item:

axios.post('https://api.example.com/items', {

  name: 'Nouvel Item',

  description: 'Description de l\'item'

})

.then(response => {

  console.log('Item créé', response.data);

})

.catch(error => {

  console.error('Erreur lors de la création', error);

});

Pour utiliser Axios dans votre projet React, vous devez d'abord l'installer, car il s'agit d'une bibliothèque indépendante. Utilisez la commande suivante pour l'installation :

npm install axios

Après l'installation, vous pouvez importer Axios dans votre composant de la manière suivante :

import axios from 'axios';

Voic maintenant un code complet utilisant Axios : 

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

import axios from 'axios';

function App() {

  const [posts, setPosts] = useState([]);

  useEffect(() => {

    axios.get('https://jsonplaceholder.typicode.com/posts')

      .then(response => {

        setPosts(response.data);

      })

      .catch(error => {

        console.error(error);

      });

  }, []);

  return (

    <ul>

      {posts.map(post => (

        <li key={post.id}>{post.title}</li>

      ))}

    </ul>

  );

}
 

Ce code définit un composant React App qui, grâce à Axios, charge des posts d'une API et les affiche en liste, illustrant ainsi la simplicité d'utilisation et de compréhension de cette bibliothèque.

Conclusion

Cette semaine, nous avons exploré diverses méthodes pour interagir avec et appeler des APIs. Le choix de ces méthodes dépend du développeur, de son approche de travail, ainsi que de la nature et du type de son projet. La semaine prochaine, nous nous pencherons sur les tests unitaires et leur mise en œuvre dans React.

Réferences

SOMINENI JAYANTH. (2023, 5 septembre). How to Make API Calls in React With Examples. Built In. https://builtin.com/software-engineering-perspectives/react-api  (consulté le 14 mars 2024)

(2023, août 1). How to integrate API in ReactJS. Sails Software Inc. https://sailssoftware.com/how-to-integrate-api-in-reactjs-step-by-step-guide/ (consulté le 14 mars 2024)

DEMIR DAVID. (2023, 21 décembre). How to Use the Fetch APIs in React ? .Apidog . https://apidog.com/blog/how-to-use-react-fetch-api/#:~:text=The%20Fetch%20API%20provides%20a,the%20response%20when%20it%20resolves. (consulté le 15 mars 2024)

OLAWANLE JOEL. (2023, 18 mai). How to Consume REST APIs in React – a Beginner's Guide. freeCodeCamp. https://www.freecodecamp.org/news/how-to-consume-rest-apis-in-react/ (consulté le 15 mars 2024)

ARELLANO KELLY. (2023, 7 mars). How To Use an API with ReactJS. Rapid Blog. https://rapidapi.com/blog/how-to-use-an-api-with-react/ (consulté le 15 mars 2024)