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.
Le moyen le plus courant consiste à l'installer à l'aide du gestionnaire de packages npm.
Importez 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.
Essayez d'exécuter une requête POST en utilisant l'exemple et cela ajoutera l'utilisateur.
axios
.Publier('https://monfauxapi.com /api/utilisateurs/', {
prénom : 'Boris',
nom : 'Moore'
}) // Utilisation d'une requête post, en spécifiant l'utilisateur
.then((response) => { // Récupération et traitement des données
console.log(response.data);})
.catch((error) => { // Si la requête échoue, une erreur sera affichée sur le terminal.
console.erreur(erreur);});
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.
Accédez à notre document CarList nouvellement créé à l'aide de l'éditeur de texte de votre choix.
Essayez d'effectuer une requête Get en utilisant l'exemple et vous obtiendrez une liste de voitures Mitsubishi.
axios.get('https://monfauxapi.com /api/cars/name/Mitsubishi') //Renvoyer les promesses à l'aide d'une requête get
.then((response) => { // Récupération et traitement des données
console.log(response.data);})
.catch((error) => { // Si la requête échoue, une erreur sera affichée sur le terminal.
console.erreur(erreur);});
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.
Essayez d'effectuer une requête DELETE en utilisant l'exemple, cela supprimera le message.
axios.delete(`https://reqres.in/api/messages/1`)
.then(() => this.setState({ status : 'Suppression réussie' }));
}
Utiliser une instance de base dans Axios
Cet exemple nécessite que vous créiez un nouveau apiComposant .js.
En créant ce composant, nous spécifions un lien standard pour que notre serveur reçoive et envoie des requêtes.
exporter par défaut axios.create({
URL de base : `http://tonapiurl.com/`
});
Le composant CarList.js sera utilisé pour les tests.
importer des axios depuis 'axios' ;
importer Api de '/mnt/c/Projet/api';
exporter la classe par défaut CarList étend React.Component {
\\ . . .
composantDidMount() {
Api.get(`curl --location --request GET 'api/voitures/nom/Mitsubishi'`)
.then(res => {
voitures const = res.data;
this.setState({ voitures });
})}\\
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.
exporter la classe par défaut CarList étend React.Component {
composantDidMount() {
réponse constante = attendre Api.get(`curl --location --request GET 'api/voitures/nom/Mitsubishi'`)
console.log(réponse);
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.
importer PostRemove depuis './components/PostRemove.js' ;
importer UserAdd. de './components/UserAdd.js' ;
fonction App() {
revenir (
)}
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.
console.log("erreur obtenir", erreur);}
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.