Dans React, la communication back-end est généralement réalisée à l'aide du protocole HTTP. Alors que de nombreux développeurs connaissent l'interface de requête HTTP XML et l'API Fetch pour effectuer des requêtes HTTP, il existe une autre bibliothèque puissante appelée Axios qui simplifie davantage le processus.
Table des matières
- Conditions préalables
- Introduction à Axios
- Étapes pour créer une application React
- Besoin d'Axios dans React
- Requête GET avec Axios
- Requête POST avec Axios :
- Supprimer la demande avec Axios :
- Objets de réponse dans Axios
- Objet d'erreur :
- Caractéristiques de la bibliothèque Axios
- Méthodes abrégées dans Axios
- Conclusion
Présentation d'Axios :
Axios, qui est une bibliothèque populaire, est principalement utilisée pour envoyer des requêtes HTTP asynchrones aux points de terminaison REST. Cette bibliothèque est très utile pour effectuer des opérations CRUD.
- Cette bibliothèque populaire est utilisée pour communiquer avec le backend. Axios prend en charge l'API Promise, native de JS ES6.
- En utilisant Axios, nous effectuons des requêtes API dans notre application. Une fois la demande faite, nous récupérons les données dans Return, puis nous utilisons ces données dans notre projet.
- Cette bibliothèque est très populaire parmi les développeurs. Vous pouvez vérifier sur GitHub et vous y trouverez 78 000 étoiles.
Avant d'installer Axios, votre application de projet React doit être prête à installer cette bibliothèque. Créer un Réagir candidature en suivant les étapes indiquées ci-dessous…
Étapes pour créer une application React :
Étape 1: Vous trouverez ci-dessous la commande pour créer l'application React dans votre projet…
npx create-react-app myreactapp>
Étape 2: Entrez dans le répertoire créé lors de la première étape.
cd myreactapp>
Étape 3: Installez la bibliothèque Axios à l'aide de la commande ci-dessous…
npm i axios>
Structure du projet :
sql sélectionne parmi plusieurs tables
Les dépendances mises à jour dans package.json déposer.
'dependencies': { '@testing-library/jest-dom': '^5.17.0', '@testing-library/react': '^13.4.0', '@testing-library/user-event': '^13.5.0', 'axios': '^1.6.2', 'react': '^18.2.0', 'react-dom': '^18.2.0', 'react-scripts': '5.0.1', 'web-vitals': '^2.1.4' },> Exemple: Cet extrait de code utilise axios pour envoyer une requête HTTP au serveur backend.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> class App extends React.Component {> >state = {> >newfiles:>null>,> >};> >handleFile(e) {> >// Getting the files from the input> >let newfiles = e.target.newfiles;> >this>.setState({ newfiles });> >}> >handleUpload(e) {> >let newfiles =>this>.state.newfiles;> >let formData =>new> FormData();> >// Adding files to the formdata> >formData.append(>'image'>, newfiles);> >formData.append(>'name'>,>'Name'>);> >axios({> >// Endpoint to send files> >url:>' http://localhost:8080/files '>,> >method:>'POST'>,> >headers: {> >// Add any auth token here> >authorization:>'your token comes here'>,> >},> >// Attaching the form data> >data: formData,> >})> >// Handle the response from backend here> >.then((res) =>{})> >// Catch errors if any> >.>catch>((err) =>{});> >}> >render() {> >return> (> >> >> > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> Envoyer des fichiers ); } } exporter l'application par défaut ;> |
>
>
Étapes pour exécuter l'application : Ouvrez le terminal et tapez la commande suivante.
npm start>
Sortir: Ouvrez le navigateur et notre projet est affiché dans l'URL http://localhost:3000/
L'exemple ci-dessus n'est qu'une petite description de code pour montrer comment utiliser Axios dans votre projet. Nous discuterons de plusieurs méthodes telles que GET, POST et PUT dans Axios dans la section à venir.
Besoin d'Axios dans React :
Comme nous l'avons expliqué, Axios vous permet de communiquer avec les API de votre projet React. Les mêmes tâches peuvent également être effectuées en utilisant AJAX, mais Axios vous offre plus de fonctionnalités et de fonctionnalités, ce qui vous aide à créer rapidement votre application.
Axios est une bibliothèque basée sur des promesses, vous devez donc implémenter certaines requêtes HTTP asynchrones basées sur des promesses. jQuery et AJAX effectuent également le même travail, mais dans le projet React, React gère tout dans son propre DOM virtuel, il n'est donc pas du tout nécessaire d'utiliser jQuery.
Vous trouverez ci-dessous un exemple pour récupérer les données du client à l'aide d'Axios…
générateur de jetons de chaîne Java
Javascript
const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(erreur));> };> getCustomersData();> |
>
>
Passons maintenant au point suivant et comprenons comment différentes opérations peuvent être effectuées telles que la récupération des données ou la consommation des données à l'aide d'Axios (GET-POST-DELETE).
Requête GET avec Axios :
Créez un composant MyBlog et intégrez-le au cycle de vie du composant DidMount. Importez l'Axios en haut et récupérez les données avec la requête Get.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class MyList extends React.Component {> >state = {> >blogs: [],> >};> >componentDidMount() {> >axios> >.get(> >`https:>//jsonplaceholder.typicode.com/posts`> >)> >.then((response) =>{> >const posts = response.data;> >this>.setState({ posts });> >});> >}> >render() {> >return> (> >>> >{>this>.state.posts.map((post) =>{> >post.title;> >})}> >>>);> >}> }> |
>
>
date locale
Ici, nous utilisons axios.get (URL) pour obtenir une promesse qui renvoie un objet de réponse. La réponse renvoyée est attribuée à l’objet de la publication. Nous pouvons également récupérer d'autres informations telles que le code de statut, etc.
Requête POST avec Axios :
Créez un nouveau composant AddPost pour les demandes de publication. Cette demande ajoutera une publication à la liste des publications.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class AddPost extends React.Component {> >state = {> >postTitle:>''>,> >};> >handleChange = (event) =>{> >this>.setState({ postTitle: event.target.value });> >};> >handleSubmit = (event) =>{> >event.preventDefault();> >const post = {> >postName:>this>.state.postName,> >};> >axios> >.post(> >`https:>//jsonplaceholder.typicode.com/posts`,> >{ post }> >)> >.then((res) =>{> >console.log(res);> >console.log(res.data);> >});> >};> >render() {> >return> (> >> >'{this.handleSubmit}'>Nom du message : type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }> |
concaténer les chaînes java
>
>
Dans le code ci-dessus, nous avons effectué une requête HTTP Post et ajouté une nouvelle publication à la base de données. L'événement onChange déclenche la méthode handleChange() et met à jour la requête lorsque la requête API renvoie les données avec succès.
Supprimer la demande avec Axios :
Pour envoyer la demande de suppression au serveur, axios.delete est utilisé. Vous devez spécifier deux paramètres lors de la création de cette URL de demande et d'une configuration facultative.
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } });> Lors de l'envoi de la demande de suppression, vous devrez définir le corps et les en-têtes de la demande. Utilisez config.data à cet effet. Dans la requête POST ci-dessus, modifiez le code comme indiqué ci-dessous…
Javascript
handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> |
>
>
Objets de réponse dans Axios :
Lorsque vous envoyez une requête au serveur, vous recevez un objet de réponse du serveur avec les propriétés indiquées ci-dessous…
- données: Vous recevez des données du serveur sous forme de charge utile. Ces données sont renvoyées sous forme JSON et analysées dans un objet JavaScript.
- statut: Vous obtenez le code HTTP renvoyé par le serveur.
- texte d'état : Message d'état HTTP renvoyé par le serveur.
- en-têtes : Tous les en-têtes sont renvoyés par le serveur.
- configuration : configuration de la demande originale.
- demande: objet XMLHttpRequest réel.
Objet d'erreur :
Vous obtiendrez un objet d'erreur s'il y a un problème avec la demande. La promesse sera rejetée avec un objet d'erreur avec les propriétés données
- message: Texte du message d'erreur.
- réponse: Objet de réponse (si reçu).
- demande: Objet XMLHttpRequest réel (lors de l'exécution dans un navigateur).
- configuration : Configuration de la demande originale.
Caractéristiques de la bibliothèque Axios
- Les données JSON sont transformées automatiquement.
- Il transforme les données de demande et de réponse.
- Utile pour effectuer des requêtes HTTP à partir de Node.js
- Il crée des XMLHttpRequests à partir du navigateur.
- Fournir une prise en charge côté client pour la protection contre XSRF.
- Prend en charge l'API de promesse.
- Possibilité d'annuler la demande.
Méthodes abrégées dans Axios :
Vous trouverez ci-dessous quelques méthodes abrégées d’Axios…
- axios.request(config)
- axios.head(url[, config])
- axios.get(url[, config])
- axios.post(url[, données[, config]])
- axios.put(url[, données[, config]])
- axios.delete(url[, config])
- axios.options(url[, config])
- axios.patch(url[, données[, config]])
Conclusion
Cet article a tout expliqué sur la bibliothèque Axios. Nous avons discuté de certaines opérations utiles telles que la récupération des données, la publication des données, la mise à jour des données ou la suppression des données dans Axios. Une fois que vous commencerez à travailler sur React, vous devrez utiliser cette bibliothèque pour communiquer avec le serveur de base de données. Il est donc important d’en faire une pratique et de comprendre comment les choses fonctionnent dans Axios.