Comment installer et utiliser Axios dans JavaScript

Construire une application du monde réel nécessite souvent une interaction avec Apis pour envoyer et récupérer des données; Il existe plusieurs façons d'interagir avec les API. L'un des packages qui permettent aux projets JavaScript ainsi que NodeJS d'interagir avec les API avec la syntaxe de code très simple et simple est Axios.

Axios est un client HTTP, qui est utilisé pour fabriquer XMLHTTPRequest à partir du navigateur ainsi que des demandes HTTP pour les projets créés avec NodeJS. Il est souvent appelé le client HTTP isomorphe, où les moyens isomorphes pour les nodejs et les navigateurs (vanille javascript).

Axios fournit des méthodes comme obtenir, poste, et supprimer et transforme automatiquement les données JSON qui sont quelque chose qui le distingue des méthodes JavaScript triviales comme le aller chercher() Méthode de l'API Fetch.

Installation d'Axios en JavaScript

Comme déjà mentionné ci-dessus, Axios est présent pour le navigateur ainsi que pour l'environnement de nœud, ce qui signifie qu'il peut être installé avec NPM et en JavaScript Vanilla en utilisant le script Axios hébergé par CDN. Il existe plusieurs façons d'installer Axios JavaScript dans votre projet, comme:

Utilisation du Node Package Manager (NPM)

Axios est disponible pour la bibliothèque NPM et peut être facilement installé dans le projet en exécutant la commande suivante dans le terminal de votre éditeur de code:

$ npm installer axios

Utilisation de Bower pour installer Axios

Bower devient de plus en plus célèbre parmi les masses. Bower aide à installer des packages Web comme NPM. Si vous travaillez avec Bower, vous pouvez installer Axios en utilisant les lignes de code suivantes:

$ bower installer axios

Utilisation d'un Axios hébergé par CDN

CDN signifie des réseaux de livraison de contenu, ces réseaux vous permettent d'utiliser des bibliothèques JavaScript hébergées sur leurs serveurs. Axios peut être installé dans votre projet en utilisant l'un des deux fournisseurs CDN Axios, le premier étant «JSDelivr CDN» Et l'autre étant le «Unpkg» Monnaie.

Pour Jsdelivr cdn Utilisez la commande dans votre fichier html:

Pour le CDN UNPKG Utilisez le fichier HTML de commande:

Avec ces commandes mentionnées ci-dessus, vous devriez pouvoir installer et utiliser Axios dans vos projets.

Utilisation d'Axios dans JavaScript

Pour démontrer l'utilisation d'Axios que nous venons d'installer en utilisant l'une des méthodes mentionnées ci-dessus dans un programme JavaScript, nous allons avoir besoin d'une page Web HTML. Pour ce post, nous allons écrire les lignes suivantes dans le fichier HTML:

Utilisateurs

Comme vous pouvez le remarquer dans le code, nous avons fait une liste non ordonnée que nous utiliserons pour afficher la liste des utilisateurs que nous obtenons de l'API.

Cela devrait nous donner la page Web suivante sur notre navigateur:

Pour démontrer la récupération des données à l'aide de l'Axios, nous allons utiliser le Req | Res L'API et l'URL de l'API est «https: // reqres.dans / API / utilisateurs ». L'étape suivante consiste à écrire trois fonctions différentes dans notre fichier javascript:

• fetch_users (): Cela utilisera AxiOS pour obtenir des données de l'API et envoyer les données à la fonction APPENDTODOM ()
• APPENDTODOM (): Cela ajoutera le nom de l'utilisateur au
  Tag après avoir créé un nouvel élément de liste à l'aide du create_li fonction
  • create_li (): Cela prendra les données de chaque utilisateur et créera un nouvel élément de liste avec uniquement le nom de l'utilisateur placé à l'intérieur:

  La fonction fetch_user () ressemble à ceci:

  const fetch_users = () =>
  axios.get ("https: // reqres.Dans / API / USERS ").alors ((réponse) =>
  CONS utilisateurs = réponse.données.données;
  appendTodom (utilisateurs);
  )
  .Catch ((Error) => Console.erreur (erreur));
  ;

  La fonction appendTodom () peut être créée avec les lignes suivantes:

  const appendtodom = (utilisateurs) =>
  const ul = document.queySelector ("ul");
  utilisateurs.map ((utilisateur) =>
  ul.APPENDCHILD (create_li (utilisateur));
  );
  ;

  Et enfin, la fonction create_li () peut être créée en utilisant les lignes de code suivantes:

  constcreate_li = (user) =>
  const li = document.CreateElement ("li");
  li.textContent = '$ utilisateur.id: $ utilisateur.first_name $ utilisateur.nom de famille';
  retour li;
  ;

  Maintenant que nous avons codé toutes nos fonctions, nous n'avons qu'à invoquer la fonction fetch_users, mais pour cela, nous allons ajouter un bouton dans notre fichier html avec les lignes de code suivantes:

  Cliquez sur moi pour obtenir des données

  Maintenant que nous avons notre bouton, nous pouvons exécuter la fonction fetch_users () sur le bouton Appuyez sur le code suivant dans notre fichier de script:

  $ ("# bouton").cliquez sur (fonction ()
  fetch_users ();
  );

  Le Compléter le code HTML est tel que:

  
  
  

  Utilisateurs

  
  
  
  Cliquez sur moi pour obtenir des données
  
  

  Le Le code JavaScript complet est tel que:

  $ ("# bouton").cliquez sur (fonction ()
  fetch_users ();
  );
  constcreate_li = (user) =>
  const li = document.CreateElement ("li");
  li.textContent = '$ utilisateur.id: $ utilisateur.first_name $ utilisateur.nom de famille';
  retour li;
  ;
  constapendTodom = (utilisateurs) =>
  const ul = document.queySelector ("ul");
  utilisateurs.map ((utilisateur) =>
  ul.APPENDCHILD (create_li (utilisateur));
  );
  ;
  constfetch_users = () =>
  axios
  .get ("https: // reqres.Dans / API / USERS ")
  .alors ((réponse) =>
  CONS utilisateurs = réponse.données.données;
  appendTodom (utilisateurs);
  )
  .Catch ((Error) => Console.erreur (erreur));
  ;

  En exécutant ce code, vous obtiendrez le résultat suivant sur votre navigateur:

  Comme vous pouvez le voir, nous sommes en mesure de récupérer les données de la API Sur bouton appuyer sur le bouton en utilisant Axios Dans notre code javascript.

  Conclusion

  Axios est un client HTTP isomorphe qui est disponible à la fois pour l'environnement de développement de nœuds et pour le JavaScript Vanilla. Axios est une bibliothèque strictement prometteuse et convertit automatiquement les données qu'elle récupère à partir de l'API du format JSON. Pour utiliser Axios dans votre projet, vous devez soit l'installer à partir de la bibliothèque NPM ou l'ajouter dans votre fichier HTML en utilisant un CDN hébergé par Axios. Dans cet article, nous avons appris à installer et à exécuter Axios dans notre projet JavaScript.