De nombreuses applications web sont confrontées à la nécessité de s’interfacer avec une API REST à un moment donné de leur développement. Pour les applications web basées sur React, nous pouvons utiliser Axios, un client HTTP léger basé sur le service $http au sein d’Angular.js v1.x. Les fonctionnalités sont similaires à l’API native de JavaScript Fetch API.
. Axios est basé sur des promesses, nous permettant d’incorporer les instructions de JavaScript async et await pour un code synchrone plus lisible. Il prend également en charge l’interception et l’annulation de requêtes. De plus, il existe une protection intégrée côté client contre la falsification de requêtes intersites.
Dans ce guide, nous allons présenter comment utiliser Axios pour accéder au populaire JSON Placeholder API dans une application React de démonstration. Vous pouvez en savoir plus sur le format JSON en JavaScript grâce à ce tutoriel.
Prérequis
Pour réaliser les étapes présentées dans ce guide, vous aurez besoin des composants suivants :
- Un serveur Ubuntu correctement configuré. Voici les étapes de configuration de votre propre serveur Ubuntu sur CloudSigma.
- La dernière version de Node.js installée. Consultez comment installer Node.js sur Ubuntu.
- Un nouveau projet React utilisant Create React App. Il sera utile de suivre et d’exécuter d’abord ce guide sur la configuration d'un projet React à l'aide de Create React App.
- Compréhension de base de HTML, CSS, et JavaScript.
Étape 1 : Installer Axios dans le projet React
Axios est directement disponible en tant que module npm. Consultez Axios sur npm. Tout ce dont nous avons besoin est de créer un projet React et d'installer le package Axios.
La commande npx suivante exécutera create-react-app pour créer un nouveau projet React. Le nom du projet sera utilisé pour créer un répertoire dédié au projet. Ici, nous avons nommé le projet react-axios-demo. Exécutez la commande :
|
1 |
npx create-react-app react-axios-demo |
Changez le répertoire actuel pour le répertoire du projet nouvellement créé :
|
1 |
cd react-axios-demo/ |
Ensuite, exécutez la npm install commande pour installer Axios. Si aucune version n'est spécifiée, alors npm téléchargera et installera automatiquement la dernière version d'Axios :
|
1 |
npm install axios |
Notre projet est maintenant prêt à utiliser Axios ! C’est le moment de mettre ses fonctionnalités en action.
Étape 2 : Construire une requête GET
Dans cette étape, nous allons présenter la création d'un nouveau composant qui utilise Axios pour envoyer une GET requête.
Tout d'abord, créez un nouveau composant PersonList qui affichera une liste de noms. Créez un répertoire dédié pour stocker le composant :
|
1 |
mkdir -pv src/components |
Ensuite, créez le fichier PersonList.js :
|
1 |
touch PersonList.js |
Ouvrez le fichier dans un éditeur de texte. Nous utilisons Visual Studio Code pour plus de confort et de lisibilité. Saisissez le code JavaScript suivant :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
Ici :
-
Nous avons importé React et Axios afin de pouvoir les utiliser tous les deux dans le composant.
-
Nous nous branchons sur le componentDidMount hook de cycle de vie et envoyons une requête GET.
Vous pouvez utiliser axios.get(<url>) depuis un point de terminaison d'API pour obtenir une promesse (renvoie un objet de réponse). L'objet de réponse contient les données souhaitées. Nous l'attribuons ensuite à la valeur de person. Nous pouvons également recueillir des informations supplémentaires sur la requête, comme le code d'état sous res.status ou d'autres informations de res.request.
Ensuite, nous devons ajouter notre composant au fichier App.js principal. Ajoutez le code suivant :
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
La configuration est terminée pour cette étape. Vous pouvez maintenant lancer l'application et la tester en utilisant votre navigateur préféré. Démarrez le serveur de développement :
|
1 |
npm start |
Comme nous pouvons le voir, le résultat affiche une liste de noms de personnes dans un ordre aléatoire :
Étape 3 : Construire une requête POST
Dans cette section, nous allons montrer comment utiliser Axios pour effectuer une autre méthode de requête HTTP appelée POST. Pour le démontrer, notre objectif est de créer un nouveau composant dans notre projet React nommé PersonAdd.
Créez le fichier PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Ensuite, ouvrez le fichier dans un éditeur de texte et entrez le code suivant :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Nom de la personne: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Ajouter</button> </form> </div> ) } } |
Dans ce code, nous récupérons la saisie de l’utilisateur et envoyons le contenu via POST à une API. À l’intérieur de la fonction handleSubmit, nous empêchons l’action par défaut du formulaire et mettons à jour l’état avec la saisie de l’utilisateur. Lors de l’utilisation de POST, cela renvoie le même objet de réponse. Nous pouvons utiliser l’objet à l’intérieur d’un appel then. Pour honorer la requête POST, nous capturons la saisie de l’utilisateur et l’ajoutons à la requête POST. Cela nous donne une réponse. Nous affichons la réponse en utilisant console.log. Cela devrait afficher la saisie de l’utilisateur dans le formulaire.
Ensuite, ajoutez le composant à App.js. Le code complet devrait ressembler à ceci :
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Maintenant, il est temps de tester les modifications. Démarrez le serveur de développement :
|
1 |
npm start |
Vérifiez le changement sur le navigateur web :
Étape 4 : Construire une requête DELETE
Dans cette section, nous allons démontrer la suppression d'éléments d'une API à l'aide de axios.delete et en utilisant une URL comme paramètre. Pour le démontrer, créez le composant PersonRemove. Créez le fichier PersonRemove.js dans le dossier src/components :
|
1 |
touch src/components/PersonRemove.js |
Après cela, ouvrez le fichier dans un éditeur de texte et ajoutez le code suivant :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Personne ID: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Supprimer</button> </form> </div> ) } } |
Ici, le res l'objet fournit les informations sur la requête. Nous pouvons ensuite utiliser console.log après la soumission du formulaire.
Ensuite, implémentez le composant dans App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
Il est temps de tester à nouveau notre code. Démarrez le serveur :
|
1 |
npm start |
Vous devriez trouver un nouveau formulaire qui prend le nom de l’utilisateur et le supprime de la liste :
Étape 5 : Appliquer l'instance de base dans Axios
Maintenant, nous allons travailler avec l'instance de base d'Axios. Ici, nous pouvons définir une URL et d'autres éléments de configuration. Pour l'implémenter, créez un fichier séparé api.js:
|
1 |
touch src/api.js |
Ouvrez-le dans un éditeur de texte et entrez le code suivant :
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Une fois configuré, nous pouvons l’utiliser à l’intérieur du PersonRemove composant. Voici à quoi ressemblerait le code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
Ici, http://jsonplaceholder.typicode.com/ est défini comme URL de base. Désormais, nous n'avons plus besoin d'utiliser l'URL complète à chaque fois que nous accédons à un point de terminaison de l'API.
Étape 6 : Implémenter async et await
Dans cette section, nous allons voir comment implémenter async et await pour travailler avec des promesses. Le mot-clé await résout la promesse et renvoie la valeur. Nous pouvons assigner cette valeur à une variable pour une utilisation plus confortable.
Voici à quoi ressemblerait le code mis à jour de PersonRemove.js :
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
Ici, nous avons remplacé .then(). Une fois promesse est résolue, nous stockons la valeur dans la variable réponse.
Réflexions finales
Dans ce tutoriel, nous avons exploré divers exemples d’utilisation d’Axios pour travailler avec l’API REST. Les codes illustrent la création de requêtes HTTP et la gestion des réponses.
Vous souhaitez en savoir plus sur JavaScript ? Découvrez nos autres guides pour débutants sur divers concepts et fonctionnalités de JavaScript, par exemple, la date et l’heure, la manipulation de chaînes de caractères, les classes, et les objets.
Bonne programmation !
Commentaires
Aucun commentaire pour l'instant. Soyez le premier.