Axios est une bibliothèque JavaScript populaire utilisée pour effectuer des requêtes HTTP. C'est un client HTTP basé sur les promesses utilisé en JavaScript ou avec d'autres bibliothèques JavaScript comme Vue.js ou React.js. En raison de sa nature isomorphe, Axios peut s'exécuter simultanément côté client et côté serveur en utilisant la même base de code. De plus, c'est un outil puissant utilisé collectivement avec async pour formuler une API conviviale. Surtout, Axios a la capacité d'annuler une requête automatiquement, ce qui est autrement un véritable parcours du combattant.
Comment fonctionne Axios ?
Axios utilise les paramètres de promesse par défaut pour s'exécuter en parallèle dans le navigateur et Node.js avec le même code. En utilisant la fonctionnalité HTTP basée sur les promesses, Axios effectue des opérations CRUD et envoie des requêtes HTTP à des points de terminaison REST . Dans ce tutoriel, nous allons vous guider à travers les étapes de configuration d'une API REST avec Axios dans Vue.js.
Commençons !
Prérequis
Pour pouvoir suivre ce tutoriel, vous devez disposer des éléments suivants :
- Node.js installé et configuré sur votre système Ubuntu.
- Si vous utilisez le système d'exploitation CentOS, vous pouvez suivre ce guide pour installer Node.js sur CentOS 8.
- Bases de JavaScript.
Étape 1 : Installation d'Axios
Avant d'installer Axios, il est important de mettre à jour les dépôts de votre système pour éviter les erreurs ou un échec de l'installation :
|
1 |
sudo apt-get update |
Ensuite, installez Axios en utilisant le paquet npm :
|
1 |
npm install axios --save |
Alternativement, vous pouvez installer Axios en utilisant le gestionnaire de paquets yarn :
|
1 |
yarn add axios |
Après cela, créez un projet Vue.js et importez-y Axios :
|
1 |
import axios from ‘axios’; |
Dans l'étape suivante, nous utiliserons la méthode axios.get() pour récupérer des données.
Étape 2 : Récupérer des données à l'aide d'une requête GET
Ici, nous allons récupérer des données à l'aide d'une requête GET . Regardez comment nous utilisons la méthode axios.get() pour récupérer des données directement depuis une méthode :
|
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 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // Récupère les posts lorsque le composant est créé. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // Les réponses JSON sont automatiquement analysées. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Vous verrez la version async ou await :
Le code ci-dessus récupérera les posts de JSONPlaceholder et distribuera les données de manière non ordonnée. Tout type d'erreur rencontré apparaîtrait dans une autre liste non ordonnée.
Étape 3 : Envoyer des données à l'aide d'une requête POST
À l'inverse de la méthode axios.get(), nous allons maintenant utiliser la méthode axios.post() pour effectuer une requête POST. Regardez comment appliquer la méthode axios.post() pour récupérer des données :
|
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 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // Envoie les posts au serveur lorsqu'il est appelé. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Vous verrez la version async ou await :
Le code ci-dessus créera un champ de saisie qui soumet du contenu à JSONPlaceholder. Tout type d'erreur rencontré apparaît dans une liste non ordonnée différente.
Étape 4 : Configurer une instance de base commune
Dans cette étape, nous allons créer une instance de base commune en utilisant la axios.create() méthode. L'objectif derrière la configuration d'une instance de base commune est de partager une URL de base entre toutes les instances.
L'instance de base commune est très pratique si tous vos appels utilisent un serveur ou un en-tête commun comme l'en-tête Authorization :
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
Enfin, vous êtes prêt à utiliser HTTP dans votre composant :
Une fois toute la configuration en place, notre http-demo.js est établi. Maintenant, Axios se connecte à JSONPlaceholder et à l'en-tête Authorization en même temps en utilisant la même base de code. Le meilleur, c'est qu'Axios récupère les posts, identifie les erreurs et les affiche dans une liste non ordonnée.
Conclusion
Dans ce tutoriel, nous avons appris les bases de l'envoi et de la récupération de données avec Axios. De plus, nous avons créé une instance de base commune pour partager une URL commune. Cependant, cela ne doit pas être la fin de votre apprentissage d'Axios. Nous vous encourageons à pratiquer d'autres méthodes Axios pour envoyer des POST, PUT, PATCH et DELETE requêtes. Plongez dans la documentation d'Axios pour explorer le sujet et essayer de construire des projets vous-même.
Pour en savoir plus sur les sujets liés à Axios et Vue.js, consultez ces ressources de notre blog:
- Utiliser le client HTTP Axios dans une application React : un tutoriel
- Utiliser Vue et Axios pour afficher des données provenant d'une API
Bon développement !
Commentaires
Aucun commentaire pour l'instant. Soyez le premier.