Introduction
Il s'agit de l'une des applications basées sur les demandes les plus populaires et les plus disponibles. http nécessaire clients, et il est utilisé partout, que ce soit en JavaScript ou en node js.
Aoxis est basé sur les promesses, donc à chaque requête, nous obtiendrons une réponse de l'objet de la requête.
Les demandes peuvent être interceptées et annulées, et il existe une protection intégrée contre l'usurpation intersite sur le clicôté ent.
Dans cette publication, vous verrez comment les requêtes Axios fonctionnent dans React, en utilisant des exemples, vous pouvez tester les requêtes sur votre propre serveur.
Ce que la bibliothèque peut faire
- Utiliser des requêtes XML
- En utilisant http requêtes de node.js
- Prend en charge la promesse API. Les promesses sont beaucoup plus faciles à tenir car nous recevons le message de toute façon
- Intercepte les requêtes et les réponses
- Annule les demandes si vous en avez besoin
- Se convertit automatiquement en JSON, cela permet d'éviter de perdre du temps à compiler
- Les soutiens cliprotection latérale contre XSFR
Ce qui est requis
- Votre serveur a une version de Node.js supérieure à 10.17.xx installée
- Votre projet React pré-construit
- Votre projet a la bibliothèque axios installée
Ajouter Axios à votre projet
Créez ou accédez à votre projet.
npx create-react-app your-projectLe moyen le plus courant consiste à l'installer à l'aide du gestionnaire de packages npm.
npm install axiosImportez Aoxis dans votre projet là où vous souhaitez l'utiliser.
Création d'une requête POST
Vous devrez créer un nouveau composant UserAdd.js dans votre projet.
Entrez le code pour la requête Post dans votre fichier UserAdd.js qui permettra à l'utilisateur d'entrer des données et d'envoyer le API.
nano /mnt/c/Project/UserAdd.jsEssayez d'exécuter une requête POST en utilisant l'exemple et cela ajoutera l'utilisateur.
const axios = require('axios');
axios
.post('https://myfakeapi.com/api/users/', {
firstName: 'Boris',
lastName: 'Moore'
}) // Using a post request, specifying the user
.then((response) => { // Data retrieval and processing
console.log(response.data);})
.catch((error) => { // If the query fails, an error will be displayed on the terminal.
console.error(error);});Vérifiez que le code fonctionne, résultant en une promesse du serveur.
Création d'une requête GET
Il est nécessaire de créer un nouveau composant sous n'importe quel nom, dans notre cas nous utiliserons le nom CarList. Ce composant doit être placé dans le répertoire /mnt/c/Projet/. Ce sous-répertoire ne sera pas dans le mnt répertoire initialement, il doit donc être créé également.
mkdir /mnt/c/Project/Accédez à notre document CarList nouvellement créé à l'aide de l'éditeur de texte de votre choix.
nano /mnt/c/Project/CarListEssayez d'effectuer une requête Get en utilisant l'exemple et vous obtiendrez une liste de voitures Mitsubishi.
const axios = require('axios');
axios.get('https://myfakeapi.com/api/cars/name/Mitsubishi') //Returning pledges using a get-query
.then((response) => { // Data retrieval and processing
console.log(response.data);})
.catch((error) => { // If the query fails, an error will be displayed on the terminal.
console.error(error);});En conséquence, nous obtenons une liste de données du serveur grâce aux promesses.
Création d'une demande de suppression
Vous devrez créer un nouveau composant PostRemove.js dans votre projet.
nano /mnt/c/Project/PostRemove.jsEssayez d'effectuer une requête DELETE en utilisant l'exemple, cela supprimera le message.
componentDidMount() {
axios.delete(`https://reqres.in/api/posts/1`)
.then(() => this.setState({ status: 'Delete successful' }));
}Utiliser une instance de base dans Axios
Cet exemple nécessite que vous créiez un nouveau apiComposant .js.
nano /mnt/c/Project/myapi.jsEn créant ce composant, nous spécifions un lien standard pour que notre serveur reçoive et envoie des requêtes.
import axios from 'axios';
export default axios.create({
baseURL: `http://yourapiurl.com/`
});Le composant CarList.js sera utilisé pour les tests.
import React from 'react';
import axios from 'axios';
import Api from '/mnt/c/Project/api';
export default class CarList extends React.Component {
\\ . . .
componentDidMount() {
Api.get(`curl --location --request GET 'api/cars/name/Mitsubishi'`)
.then(res => {
const cars = res.data;
this.setState({ cars });
})}\\Après avoir créé un api composant, nous n'avons pas besoin de spécifier constamment un lien vers le serveur pour recevoir et envoyer des requêtes. Il vous suffit de modifier le chemin d'accès à la demande souhaitée dans le composant souhaité.
Utiliser asynchrone et attendre
Le composant CarList.js sera utilisé pour les tests.
Le mot clé await autorise la communication et envoie le résultat en réponse. La valeur peut être affectée à une variable.
import API from '/mnt/c/Project/api';
export default class CarList extends React.Component {
componentDidMount() {
const response = await Api.get(`curl --location --request GET 'api/cars/name/Mitsubishi'`)
console.log(response);
console.log(response.data);})}Dans l'exemple, nous remplaçons .then() à la place, les données reçues seront affichées dans la console. La promesse sera remplie et la valeur sera stockée dans la variable de la réponse reçue.
En cliquant
Avant de vérifier les requêtes, vérifiez si vous avez les requêtes spécifiées dans le program composant.
Dans nos instructions, nous modifierons le composant yourapp.js.
import CarList from './components/CarList.js';
import PostRemove from './components/PostRemove.js';
import UserAdd. from './components/UserAdd.js';
function App() {
return (
<div ClassName="App">
<CarList/>
<UserAdd/>
<PostRemove/>
</div>)}Gestion des erreurs de requête
L'un des aspects importants du traitement des données que nous recevons du serveur est que nous ne pouvons les récupérer que s'il n'y a pas d'erreur lors de l'exécution de la requête. Pour afficher les erreurs, vous pouvez utiliser la fonction catch.
catch (error) { // error handling and displaying in the console
console.log("error get", error);}Si vous obtenez une erreur lors de l'exécution de la requête, cette fonction imprimera l'erreur sur la console.
Conclusion
L'aspect positif de la bibliothèque Axios est sa capacité à convertir automatiquement en JSON, nous n'avons pas besoin de faire de manipulation supplémentaire pour convertir un objet en JSON car nous l'obtiendrons dans la réponse. Passant parameters à interroger, lorsque nous exécutons une méthode, nous pouvons passer certains parameters à notre requête.
Dans cette publication, nous avons déconstruit les requêtes de la bibliothèque axios, comment elles fonctionnent avec React.
