Un guide complet pour travailler avec Axios

Axios est une bibliothèque JavaScript qui fournit une API simple pour envoyer des requêtes HTTP à partir de code JavaScript côté client ou de code Node.js côté serveur. Axios est construit sur l'API Promise de JavaScript, ce qui rend le code asynchrone plus maintenable.

Premiers pas 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 :

<scénariosrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">scénario>

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 à l'aide du gestionnaire de packages npm ou yarn :

npm installer axios
# ou
fil ajouter des axios

Lors de l'installation, vous pouvez commencer à utiliser Axios dans votre projet JavaScript :

constante axios = exiger('axios');

Tout au long de ce guide, vous travaillerez avec le logiciel gratuit Espace réservé JSON API. Bien que cette API dispose d'un ensemble de ressources, vous n'utiliserez que le /comments et /posts points de terminaison. Les points de terminaison sont des URL spécifiques auxquelles il est possible d'accéder pour récupérer ou manipuler des données.

Faire des requêtes GET avec Axios

Il existe plusieurs façons de faire une requête GET à l'aide d'Axios. Cependant, la syntaxe dépend généralement des préférences.

L'une des façons de faire une requête GET est d'utiliser le axios() méthode avec un objet qui spécifie la méthode de requête comme obtenir et l'URL à laquelle envoyer la demande.

Par exemple:

constante axios = exiger("axios");
axios({
 méthode: "obtenir",
 URL: " https://jsonplaceholder.typicode.com/comments",
})
 .alors((res) => {
console.log (res.data);
 })
 .attraper((se tromper) => {
console.erreur (erreur);
 });

Cet exemple crée une promesse utilisant le modèle de programmation asynchrone en enchaînant les .alors() et .attraper() méthodes. La promesse enregistre la réponse dans la console lorsque la demande aboutit et enregistre le message d'erreur si la demande échoue.

Axios fournit également un moyen plus simple d'effectuer des requêtes GET qui éliminent le besoin de transmettre un objet en enchaînant les .obtenir() méthode à la axios exemple.

Par exemple:

axios
 .obtenir(" https://jsonplaceholder.typicode.com/comments")
 .alors((res) => {
console.log (res.data);
 })
 .attraper((se tromper) => {
console.erreur (erreur);
 });

Faire des requêtes POST avec Axios

Faire une requête POST avec Axios est similaire à faire une requête GET. Vous pouvez envoyer des données à un serveur à l'aide de cette requête.

L'extrait de code ci-dessous est un exemple d'utilisation d'Axios .poste() méthode:

axios
 .poste(" https://jsonplaceholder.typicode.com/comments", {
 nom: "Jackson Smith",
 e-mail: "[email protected]",
 corps: "C'est une œuvre d'art.",
 })
 .alors((res) => {
console.log (res.data);
 })
 .attraper((se tromper) => {
console.erreur (erreur);
 });

Le code envoie une requête POST à ​​l'API JSONPlaceholder pour créer un nouveau commentaire. Le axios.post méthode envoie des données au /comments point final.

Les données envoyées dans la requête sont un objet avec un nom, e-mail, et corps propriété. Si la requête aboutit, le alors La méthode enregistre les données de réponse dans la console. Et s'il y a une erreur, le attraper La méthode enregistre l'erreur dans la console.

Faire des requêtes PUT/PATCH avec Axios

Vous pouvez utiliser la requête PUT ou PATCH pour mettre à jour une ressource existante sur le serveur. Alors que PUT remplace la totalité de la ressource, PATCH ne met à jour que les champs spécifiés.

Pour faire une requête PUT ou PATCH avec Axios, vous devez utiliser le .mettre() ou .correctif() méthodes respectivement.

Voici un exemple d'utilisation de ces méthodes pour mettre à jour le e-mail propriété du commentaire avec un identifiant de 100 :

constante axios = exiger("axios");
axios
 .obtenir(" https://jsonplaceholder.typicode.com/comments/100")
 .alors((res) => {
console.log (res.data.email);
 })
 .attraper((se tromper) => {
console.erreur (erreur);
 });
// Sortir:
// '[email protected]'
axios
 .correctif(" https://jsonplaceholder.typicode.com/comments/100", {
 e-mail: "[email protected]",
 })
 .alors((res) => {
console.log (res.data.email);
 })
 .attraper((se tromper) => {
console.erreur (erreur);
 });
// Sortir:
// '[email protected]',

Ce programme fait d'abord une requête GET au point de terminaison " https://jsonplaceholder.typicode.com/comments/100". Il enregistre ensuite le e-mail propriété du commentaire avec un ID de 100 à la console. Nous faisons une requête GET afin que vous puissiez voir ce qui a changé après avoir fait la requête PATCH.

La deuxième demande est une demande PATCH au même point de terminaison. Ce code met à jour l'e-mail du commentaire à [email protected].

Faire des requêtes DELETE avec Axios

Vous pouvez utiliser le SUPPRIMER demande de suppression d'une ressource sur le serveur.

Prenons l'exemple suivant d'utilisation du .supprimer() méthode pour supprimer une ressource du serveur :

axios
 .supprimer(" https://jsonplaceholder.typicode.com/comments/10")
 .alors((res) => {
console.log (res.data);
 })
 .attraper((se tromper) => {
console.erreur (erreur);
 });
//Output:
// {}

En enregistrant un objet vide dans la console, le code ci-dessus montre qu'il a supprimé le commentaire avec l'ID de 10.

Faire des requêtes simultanées avec Axios

Vous pouvez récupérer des données à partir de plusieurs points de terminaison à la fois à l'aide d'Axios. Pour ce faire, vous devez utiliser le .tous() méthode. Cette méthode accepte un tableau de requêtes comme paramètre et se résout uniquement lorsque vous recevez toutes les réponses.

Dans l'exemple suivant, le .tous() récupère les données de deux points de terminaison simultanément :

axios
 .tous([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .alors(
 axios.spread((commentaires, messages) => {
console.log (commentaires.données);
console.log (posts.data);
 })
 )
 .attraper((se tromper) =>console.erreur (erreur) );

Le bloc de code ci-dessus envoie des demandes simultanément, puis transmet les réponses au .alors() méthode. d'Axios .diffuser() La méthode sépare les réponses et affecte chaque réponse à sa variable.

Enfin, la console enregistre le données propriété des deux réponses: commentaires et publications.

Intercepter les requêtes avec Axios

Parfois, vous devrez peut-être intercepter une requête avant qu'elle n'arrive au serveur. Vous pouvez utiliser Axios interceptors.request.use() méthode pour intercepter les requêtes.

Dans l'exemple suivant, la méthode consigne le type de requête dans la console pour chaque requête effectuée :

axios.interceptors.request.use(
 (config) => {
console.enregistrer(`${config.method} demande faite`);
retour configuration ;
 },
 (erreur) => {
retourPromesse.reject (erreur);
 }
);
axios
 .obtenir(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .alors((res) =>console.log (rés.données))
 .attraper((se tromper) =>console.erreur (erreur) );

Le programme définit un intercepteur Axios en utilisant le axios.interceptors.request.use méthode. Cette méthode prend configuration et erreur objets comme arguments. Le configuration L'objet 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 intercepteur renvoie le configuration objet, permettant à la demande de se dérouler normalement. S'il y a une erreur, la fonction renvoie le rejet Promesse objet.

Enfin, le programme fait une requête pour tester l'intercepteur. La console enregistrera le type de requête effectuée, dans ce cas, une requête GET.

Il y a plus à Axios

Vous avez appris à faire et à intercepter des requêtes dans vos projets avec Axios. De nombreuses autres fonctionnalités, telles que la transformation des requêtes et l'utilisation d'instances Axios, sont à votre disposition en tant que développeur JavaScript. Axios reste une option privilégiée pour effectuer des requêtes HTTP dans vos applications JavaScript. Cependant, Fetch API est une autre bonne option que vous pouvez explorer.