Package Axios NPM : guide du débutant pour l'installation et la création de requêtes HTTP

Présentation

Lors de la création d'applications Web modernes, l'envoi de requêtes HTTP est une tâche essentielle pour récupérer ou envoyer des données à un serveur. Bien que JavaScript fournisse l'API fetch comme moyen natif de gérer ces requêtes, de nombreux développeurs préfèrent utiliser le package Axios npm, une bibliothèque intuitive et riche en fonctionnalités. Axios simplifie le processus en proposant un client HTTP basé sur des promesses qui fonctionne de manière transparente dans les navigateurs et les environnements Node.js. Sa prise en charge de async/await rend le code plus facile à lire et à maintenir, en particulier lors du traitement de plusieurs requêtes.

Ce blog vous aidera à démarrer avec le package Axios npm, en expliquant comment l'installer et l'utiliser pour les opérations HTTP de base telles que GET, POST et PUT. Nous examinerons également ses fonctionnalités et pourquoi il s'agit d'un choix incontournable pour les développeurs plutôt que des alternatives telles que l'API de récupération native.

Qu'est-ce qu'Axios ?

Axios est une bibliothèque JavaScript légère conçue pour rendre les requêtes HTTP plus simples et plus efficaces. Il fonctionne comme un client basé sur des promesses, permettant aux développeurs de gérer les flux de données asynchrones de manière plus propre et plus gérable. Que vous travailliez dans le navigateur ou dans un environnement Node.js, Axios fournit une solution unifiée pour interagir avec les API.

Caractéristiques d'Axios

• Basé sur les promesses : Fonctionne de manière transparente avec les promesses et prend en charge la syntaxe async/wait pour un code asynchrone plus propre.
• Transformation JSON automatique : Axios convertit automatiquement les réponses JSON en objets JavaScript, évitant ainsi l'étape supplémentaire d'analyse manuelle des données.
• Intercepteurs de requêtes et de réponses : Il permet aux développeurs de modifier globalement les requêtes ou les réponses avant qu'elles ne soient traitées.
• Configurations par défaut : Vous pouvez créer des instances Axios avec des configurations prédéfinies telles que des URL de base ou des en-têtes, réduisant ainsi le code répétitif.
• Gestion des erreurs : Fournit une gestion robuste des erreurs avec des messages d'erreur détaillés, facilitant le débogage.

Pourquoi choisir Axios plutôt que la récupération ?

Bien que l'API fetch soit nativement disponible en JavaScript, Axios offre plusieurs avantages qui en font un choix privilégié :

1. Gestion automatique de JSON : Avec fetch, les développeurs doivent analyser manuellement la réponse à l'aide de réponse.json(). Axios le fait automatiquement.

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

1. Intercepteurs de requête : Axios permet aux développeurs de modifier les en-têtes ou de gérer les jetons d'authentification via des intercepteurs, ce qui n'est pas pris en charge nativement par fetch.
2. Gestion des erreurs : Axios fournit un objet d'erreur plus détaillé, tandis que la récupération considère les codes de réponse HTTP tels que 404 ou 500 comme des requêtes réussies, sauf vérification explicite.
3. Prise en charge des anciens navigateurs : Axios inclut une prise en charge intégrée pour les anciens navigateurs, contrairement à la récupération, qui peut nécessiter des polyfills.

Ces fonctionnalités, combinées à sa facilité d'utilisation, font de Axios npm un outil fiable et convivial pour les développeurs pour gérer les requêtes HTTP.

Si vous êtes intéressé par une comparaison plus approfondie, nous avons un autre blog qui approfondit les nuances de Axios vs fetch, expliquant quand choisir l'un plutôt que l'autre. Découvrez-le ici : Axios vs Fetch : lequel devriez-vous choisir pour votre projet ?.

Comment installer Axios npm

Démarrer avec Axios npm est simple et rapide. Vous trouverez ci-dessous les instructions étape par étape pour installer et inclure Axios dans votre projet.

Étape 1 : Installer Axios

Pour utiliser Axios, vous devez d'abord l'installer dans votre projet. Vous pouvez le faire en utilisant npm ou Yarn.

1. Utilisation de npm (Node Package Manager) : Ouvrez votre terminal dans le répertoire du projet et exécutez la commande suivante :

   npm install axios

1. Utiliser du fil : Si vous utilisez Yarn comme gestionnaire de packages, exécutez :

   yarn add axios

Cela ajoutera Axios en tant que dépendance à votre fichier package.json.

Étape 2 : Inclure Axios dans votre projet

Après avoir installé Axios, vous devez l'importer dans votre fichier JavaScript ou TypeScript.

1. Utilisation de la syntaxe CommonJS : Si vous travaillez dans un environnement CommonJS (par exemple, Node.js), vous pouvez inclure Axios en utilisant require :

   const axios = require('axios');

1. Utilisation de la syntaxe ES6 : Pour les modules ES6 ou les frameworks JavaScript modernes comme React, importez Axios comme suit :

   import axios from 'axios';

Les deux approches fonctionneront en fonction de la configuration de votre projet et de l'environnement JavaScript.

Vérification de l'installation

Voici un simple extrait de code pour vérifier qu'Axios a été installé et importé correctement :

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Axios is working:', response.data);
  })
  .catch(error => {
    console.error('Error using Axios:', error);
  });

Exécutez ce code dans votre projet, et si vous voyez les données récupérées enregistrées dans votre console, vous avez installé et inclus avec succès Axios npm dans votre projet.

4. Comprendre les méthodes HTTP avec Axios

Axios facilite la gestion des méthodes HTTP telles que GET, POST, PUT et DELETE grâce à sa syntaxe intuitive. Explorons chacune de ces méthodes en détail, avec des exemples montrant comment les utiliser.

4.1. OBTENIR Demande

Une requête GET est utilisée pour récupérer des données d'un serveur. Il s'agit de l'une des méthodes HTTP les plus courantes, généralement utilisée pour récupérer des listes, des profils d'utilisateurs ou toute donnée en lecture seule.

Exemple de code :

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

Explication :

• axios.get(url) envoie une requête GET à l'URL fournie.
• Le fichier réponse.data contient les données récupérées sur le serveur.
• Le bloc .catch() gère toutes les erreurs, telles que les problèmes de réseau ou les points de terminaison non valides.

Exemple de sortie :

   npm install axios

4.2. Demande POST

Une requête POST est utilisée pour envoyer des données à un serveur, généralement pour créer de nouveaux enregistrements tels que des inscriptions d'utilisateurs ou des articles de blog.

Exemple de code :

   yarn add axios

Explication :

• axios.post(url, data) envoie une requête POST au serveur avec les données spécifiées dans le deuxième argument.
• Dans cet exemple, la requête envoie une nouvelle publication avec un titre, un corps et un identifiant utilisateur.
• La réponse du serveur inclut la ressource nouvellement créée.

Exemple de sortie :

   const axios = require('axios');

4.3. Demande PUT

Une requête PUT est utilisée pour mettre à jour une ressource existante. Il remplace généralement la ressource entière par les données mises à jour.

Exemple de code :

   import axios from 'axios';

Explication :

• axios.put(url, data) envoie une requête PUT pour mettre à jour la ressource à l'URL donnée.
• Le deuxième argument contient les données mises à jour, qui dans ce cas mettent à jour le titre et le corps du message avec l'identifiant : 1.
• Le serveur répond avec la ressource mise à jour.

Exemple de sortie :

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Axios is working:', response.data);
  })
  .catch(error => {
    console.error('Error using Axios:', error);
  });

4.4. DEMANDE DE SUPPRESSION

Une requête DELETE est utilisée pour supprimer une ressource du serveur. Il est couramment utilisé pour supprimer des enregistrements tels que des profils d'utilisateurs ou des publications.

Exemple de code :

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Explication :

• axios.delete(url) envoie une requête DELETE au serveur.
• Le serveur supprime la ressource spécifiée par l'URL (/posts/1 dans ce cas) et peut renvoyer une réponse de confirmation.

Exemple de sortie :

[
  { "id": 1, "name": "Leanne Graham", "email": "leanne@example.com" },
  { "id": 2, "name": "Ervin Howell", "email": "ervin@example.com" }
]

Une réponse vide indique que la suppression a réussi.

Avec ces méthodes HTTP, Axios fournit un moyen propre et concis d'interagir avec les API pour toutes les opérations CRUD (Créer, Lire, Mettre à jour, Supprimer). Sa structure basée sur des promesses et sa gestion robuste des erreurs en font un outil puissant pour tout projet. Explorons maintenant quelques fonctionnalités avancées d'Axios !

Fonctionnalités avancées d'Axios

Bien qu'Axios soit simple pour les requêtes HTTP de base, il offre également des fonctionnalités avancées qui en font un outil puissant pour les cas d'utilisation plus complexes. Voici quelques-unes de ses fonctionnalités avancées notables :

Configuration des en-têtes

• Axios vous permet de personnaliser les en-têtes de requêtes, ce qui est particulièrement utile pour envoyer des jetons d'authentification ou définir des types de contenu.
• Exemple de définition d'un en-tête pour une requête API :

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

Configuration des instances Axios

• Si vous travaillez avec une API qui nécessite des configurations répétitives, vous pouvez créer une instance Axios avec des paramètres prédéfinis tels que les URL de base et les en-têtes par défaut.
• Exemple de création d'une instance Axios :

   npm install axios

Utiliser des intercepteurs

• Les intercepteurs vous permettent de modifier globalement les demandes ou les réponses avant qu'elles ne soient traitées. Ceci est utile pour ajouter des en-têtes, enregistrer des demandes ou gérer les erreurs de manière centralisée.
• Exemple d'intercepteur de requêtes :

   yarn add axios

Grâce à ces fonctionnalités avancées, vous pouvez optimiser votre utilisation d'Axios pour de meilleures performances, évolutivité et maintenabilité dans vos applications.

Dépannage des problèmes courants

Comme tout outil, l'utilisation d'Axios peut comporter des défis. Voici quelques problèmes courants auxquels les développeurs sont confrontés et comment les résoudre :

Problèmes CORS

• Problème : Des erreurs de partage de ressources cross-origine (CORS) se produisent lorsque le serveur API n'autorise pas les requêtes provenant de votre domaine.
• Solution :
  • Assurez-vous que le serveur prend en charge CORS en activant les en-têtes appropriés comme Access-Control-Allow-Origin.
  • Utilisez un proxy ou une extension de navigateur pendant le développement pour contourner l'erreur.

Délai d'expiration de la demande

• Problème : Le serveur API met trop de temps à répondre, provoquant un délai d'attente.
• Solution : Définissez un délai d'attente dans la configuration de votre requête Axios :

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

Erreurs réseau

• Problème : Des problèmes tels que ENOTFOUND ou ERR_NETWORK se produisent en raison de problèmes de connectivité.
• Solution : Vérifiez votre connexion réseau et l'URL de l'API. Ajoutez une logique de nouvelle tentative pour les erreurs transitoires :

   npm install axios

Erreurs de débogage

• Problème : Les erreurs Axios peuvent ne pas toujours être explicites.
• Solution : Vérifiez l'objet d'erreur pour plus de détails :

   yarn add axios

Rejet de promesse non géré

• Problème : Oublier de gérer .catch() peut entraîner des avertissements de rejet de promesse non gérés.
• Solution : Incluez toujours un bloc .catch() ou utilisez try/catch avec async/await pour gérer les erreurs.

En résolvant ces problèmes courants, vous pouvez garantir une expérience plus fluide lorsque vous travaillez avec Axios npm dans vos projets.

Conclusion

Dans ce guide, nous avons exploré les principes fondamentaux de l'utilisation de Axios npm pour effectuer des requêtes HTTP en JavaScript. De l'installation d'Axios à la création de vos premières requêtes GET, POST, PUT et DELETE, vous avez vu comment il simplifie le processus grâce à sa structure basée sur des promesses, son analyse JSON automatique et ses fonctionnalités robustes de gestion des erreurs. Nous avons également abordé des fonctionnalités avancées telles que la configuration des en-têtes, la création d'instances Axios réutilisables et l'utilisation d'intercepteurs pour la modification des requêtes/réponses.

Axios est un outil puissant qui peut rationaliser la façon dont vous gérez les requêtes API dans vos projets. Que vous créiez une application Web simple ou que vous gériez des intégrations d'API complexes, Axios rend le processus intuitif et efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!