Axios est une bibliothèque JavaScript qui fournit une API simple pour envoyer des requêtes HTTP à partir d’un code JavaScript côté client ou d’un code Node.js côté serveur. Axios s’appuie sur l’API Promise de JavaScript, qui rend le code asynchrone plus facile à maintenir.
Démarrer avec Axios
Vous pouvez utiliser Axios dans votre application en utilisant un réseau de diffusion de contenu (CDN) ou en l’installant dans votre projet.
Pour utiliser Axios directement en HTML, copiez le lien CDN ci-dessous et insérez-le dans la section head de votre fichier HTML :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Avec cette approche, vous pouvez utiliser Axios et ses méthodes HTTP dans le corps de vos scripts HTML. Axios peut également consommer des API REST dans un framework comme React.
Pour utiliser Axios dans un projet Node.js, installez-le dans votre répertoire de projet en utilisant le gestionnaire de paquets npm ou yarn :
npm install axios
# or
yarn add axios
Après l’installation, vous pouvez commencer à utiliser Axios dans votre projet JavaScript :
const axios = require('axios');
Tout au long de ce guide, vous travaillerez avec l’API gratuite JSONPlaceholder. Bien que cette API dispose d’un ensemble de ressources, vous n’utiliserez que l’API /comments et /posts points de terminaison. Les points de terminaison sont des URL spécifiques auxquels on peut accéder pour récupérer ou manipuler des données.
Faire des requêtes GET avec Axios
Il y a plusieurs façons de faire une requête GET avec Axios. Cependant, la syntaxe dépend généralement des préférences.
L’une des façons d’effectuer une requête GET est d’utiliser la commande axios() avec un objet qui spécifie la méthode de requête en tant que obtenir et l’URL à laquelle envoyer la requête.
Par exemple :
const axios = require("axios");
axios({
method: "get",
url: "https://jsonplaceholder.typicode.com/comments",
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
Cet exemple crée une promesse en utilisant le modèle de programmation asynchrone en enchaînant les commandes .then() et .catch() méthodes. La promesse enregistre la réponse sur la console lorsque la demande aboutit et enregistre le message d’erreur si la demande échoue.
Axios fournit également un moyen plus facile de faire des requêtes GET qui éliminent le besoin de passer un objet en enchaînant la méthode .get() à la méthode axios instance.
Par exemple :
axios
.get("https://jsonplaceholder.typicode.com/comments")
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
Faire des requêtes POST avec Axios
L’exécution d’une requête POST avec Axios est similaire à l’exécution d’une requête GET. Vous pouvez envoyer des données à un serveur en utilisant cette requête.
L’extrait de code ci-dessous est un exemple d’utilisation de l’interface d’Axios .post() méthode :
axios
.post("https://jsonplaceholder.typicode.com/comments", {
name: "Jackson Smith",
email: "jsmith@example.com",
body: "This is a piece of art.",
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
Le code effectue une requête POST à l’API JSONPlaceholder pour créer un nouveau commentaire. Le code axios.post envoie des données à la méthode /commentaires endpoint.
Les données envoyées dans la requête sont un objet avec une valeur nom, emailet corps propriété. Si la demande aboutit, la propriété alors enregistre les données de la réponse dans la console. En cas d’erreur, la méthode catch enregistre l’erreur dans la console.
Faire des requêtes PUT/PATCH avec Axios
Vous pouvez utiliser les requêtes PUT ou PATCH pour mettre à jour une ressource existante sur le serveur. Alors que PUT remplace la ressource entière, PATCH ne met à jour que les champs spécifiés.
Pour effectuer une requête PUT ou PATCH avec Axios, vous devez utiliser la commande .put() ou .patch() respectivement.
Voici un exemple d’utilisation de ces méthodes pour mettre à jour le fichier courriel propriété du commentaire avec un identifiant de 100 :
const axios = require("axios");
axios
.get("https://jsonplaceholder.typicode.com/comments/100")
.then((res) => {
console.log(res.data.email);
})
.catch((err) => {
console.error(err);
});
// Output:
// 'Leone_Fay@orrin.com'
axios
.patch("https://jsonplaceholder.typicode.com/comments/100", {
email: "donaymilin@ether.com",
})
.then((res) => {
console.log(res.data.email);
})
.catch((err) => {
console.error(err);
});
// Output:
// 'donaymilin@ether.com',
Ce programme effectue d’abord une requête GET à l’adresse « https://jsonplaceholder.typicode.com/comments/100 ». Il enregistre ensuite le courriel du commentaire dont l’identifiant est 100 à la console. Nous effectuons une requête GET afin que vous puissiez voir ce qui a changé après avoir effectué la requête PATCH.
La seconde requête est une requête PATCH vers le même point d’accès. Ce code met à jour l’email du commentaire en donaymilin@ether.com.
Faire des requêtes DELETE avec Axios
Vous pouvez utiliser l’option DELETE demande de suppression d’une ressource sur le serveur.
Voici un exemple d’utilisation de la fonction .delete() pour supprimer une ressource du serveur :
axios
.delete("https://jsonplaceholder.typicode.com/comments/10")
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
//Output:
// {}
En enregistrant un objet vide dans la console, le code ci-dessus montre qu’il a supprimé le commentaire dont l’ID est 10.
Faire des requêtes simultanées avec Axios
Axios vous permet de récupérer des données à partir de plusieurs points d’extrémité à la fois. Pour ce faire, vous devez utiliser l’option .all() . Cette méthode accepte un tableau de requêtes en tant que paramètre. Cette méthode accepte un tableau de requêtes comme paramètre et ne se résout que lorsque vous recevez toutes les réponses.
Dans l’exemple suivant, la méthode .all() La méthode .all() permet de récupérer les données de deux points d’extrémité simultanément :
axios
.all([
axios.get("https://jsonplaceholder.typicode.com/comments?_limit=2"),
axios.get("https://jsonplaceholder.typicode.com/posts?_limit=2"),
])
.then(
axios.spread((comments, posts) => {
console.log(comments.data);
console.log(posts.data);
})
)
.catch((err) => console.error(err));
Le bloc de code ci-dessus envoie des requêtes simultanément, puis transmet les réponses à la méthode .then() méthode. La méthode .spread() sépare les réponses et affecte chaque réponse à sa variable.
Enfin, la console enregistre le message données propriété des deux réponses : commentaires et posts.
Intercepter les requêtes avec Axios
Il est parfois nécessaire d’intercepter une requête avant qu’elle n’atteigne le serveur. Vous pouvez utiliser le module interceptors.request.use() méthode pour intercepter les requêtes.
Dans l’exemple suivant, la méthode enregistre le type de requête dans la console pour chaque requête effectuée :
axios.interceptors.request.use(
(config) => {
console.log(`${config.method} request made`);
return config;
},
(error) => {
return Promise.reject(error);
}
);
axios
.get("https://jsonplaceholder.typicode.com/comments?_limit=2")
.then((res) => console.log(res.data))
.catch((err) => console.error(err));
Le programme définit un intercepteur Axios à l’aide de la méthode axios.interceptors.request.use méthode. Cette méthode prend config et erreur objets comme arguments. Les config contient des informations sur la requête, y compris la méthode de requête (config.method) et l’URL de la requête (config.url).
La fonction d’interception renvoie le config ce qui permet à la demande de se poursuivre normalement. En cas d’erreur, la fonction renvoie l’objet rejeté Promesse objet.
Enfin, le programme effectue une requête pour tester l’intercepteur. La console enregistre le type de requête effectuée, dans ce cas, une requête GET.
Axios ne s’arrête pas là
Vous avez appris à créer et à intercepter des requêtes dans vos projets en utilisant Axios. De nombreuses autres fonctionnalités, telles que la transformation des requêtes et l’utilisation des instances Axios, sont à votre disposition en tant que développeur JavaScript. Axios reste l’option préférée pour effectuer des requêtes HTTP dans vos applications JavaScript. Cependant, l’API Fetch est une autre option intéressante que vous pouvez explorer.
