Comment faire des demandes HTTP dans JavaScript en utilisant Axios | Expliqué avec des exemples

Axios est strictement une bibliothèque JavaScript basée sur des promesses qui peut être incluse dans votre projet en utilisant le Node Package Manager (NPM) ou Axios hébergé par CDN. Il est utilisé pour fabriquer XMLHTTPREQUEST à partir du navigateur ainsi que des demandes HTTP pour les projets créés avec NodeJS. Puisqu'il peut fonctionner avec les projets de nœuds et pour les navigateurs, il est souvent appelé module isomorphe.

C'est un client HTTP, ce qui signifie que nous pouvons utiliser son OBTENIR, POSTE, et SUPPRIMER Méthodes pour interagir avec les API

Configuration de Axios dans votre projet

Si vous travaillez avec le package de noeud Manage, vous pouvez télécharger Axios en tapant la commande suivante dans le terminal de votre éditeur de code:

$ npm installer axios

Si vous travaillez avec Vanilla JavaScript, vous pouvez inclure l'axios hébergé CDN dans votre fichier HTML en utilisant la ligne suivante:

Pour tester également Axios, nous utiliserons l'API Mock fournis par Req | Res. Et l'URL de l'API est «https: // reqres.dans / API / utilisateurs ».

Puisqu'il s'agit d'un tutoriel pour vous montrer comment travailler avec Axios pour faire des demandes HTTP, nous ne manipulerons donc pas avec des éléments HTML. Nous n'avons que les lignes suivantes dans la page Web HTML:

Demandes Axios HTTP

Obtenez une demande avec Axios

Faire OBTENIR Demandes à l'API à l'aide de l'API Nous utilisons la syntaxe suivante:

axios.obtenir (URL).alors (réponse => ).catch (error => ());

Utilisons cette syntaxe pour faire une demande GET au req | API de l'utilisateur Res:

axios.get ("https: // reqres.Dans / API / USERS ").alors ((réponse) =>
CONS utilisateurs = réponse.données.données;
console.journal («obtenir des utilisateurs», utilisateurs);
).Catch ((Error) => Console.erreur (erreur));

Mais nous voulons envelopper cette méthode Get dans une fonction, alors utilisez les lignes de code suivantes:

const getUsers = () =>
axios
.get ("https: // reqres.Dans / API / USERS ")
.alors ((réponse) =>
CONS utilisateurs = réponse.données.données;
console.journal («obtenir des utilisateurs», utilisateurs);
)
.Catch ((Error) => Console.erreur (erreur));
;

Maintenant, tout ce que nous avons à faire est d'appeler la fonction getuesrs () avec la ligne de code suivante:

getUsers ();

En exécutant le fichier HTML, vous verrez les résultats suivants:

Si nous élargissons cette entrée, nous pourrons voir la réponse de l'API beaucoup plus clairement:

Nous avons réussi OBTENIR demander à l'aide d'Axios et imprimer la réponse à la console.

Demande de poste avec Axios

Pour faire une demande de poste avec Axios, vous devez utiliser la syntaxe suivante:

axios.Post (URL).alors ((réponse) => ).catch ((error));

Pour faire une demande de poste au API req | res, Nous utilisons les lignes de code suivantes qui créeront un nouvel utilisateur:

const CreateUser = (user) =>
axios
.Post ("https: // reqres.Dans / API / utilisateurs ", utilisateur)
.alors ((réponse) =>
const Adduser = réponse.données;
console.journal ('Post: l'utilisateur est ajouté', ajouté);
)
.Catch ((Error) => Console.erreur (erreur));
;

Pour invoquer ça Demande de poste, Nous devons appeler cette fonction Créer un utilisateur(), Mais avant de le faire, nous devons vérifier l'API sur le type de JSON, il accepte-t-il pour une nouvelle création d'utilisateurs. Ainsi, sur le site Web de req | Req, nous pouvons voir le format JSON suivant pour la demande de poste:

Il faut un "nom" paire de valeurs clés et une paire de valeurs clés «travail». Appelons le Créer un utilisateur() fonction avec JSON approprié à l'intérieur:

Créer un utilisateur(
Nom: "John Doe",
Emploi: "Auditeur",
);

Exécutez le fichier et vous verrez le résultat suivant sur la console de votre navigateur:

C'est tout, nous avons pu envoyer un POSTE Demande à une API à l'aide d'AxiOS.

Supprimer la demande avec Axios

Pour faire des demandes de suppression avec Axios à l'API, vous devez utiliser la syntaxe suivante

axios.supprimer (URL).alors ((réponse) => ).catch ((error) => ());

Pour effectuer une demande de suppression à l'API REQ | RES, utilisez les lignes de code suivantes:

const DeleteUser = (id) =>
axios
.supprimer ('https: // reqres.dans / api / utilisateurs / $ id ')
.alors ((réponse) =>
console.log ('supprimer: l'utilisateur est supprimé', id);
)
.Catch ((Error) => Console.erreur (erreur));
;

Tout ce que nous avons à faire est d'invoquer la fonction DeleteUser en utilisant la ligne suivante:

DeleteUser (2);

Exécutez le fichier et observez le résultat sur la console du navigateur:

Voilà, nous avons réussi à supprimer une demande à une API à l'aide d'Axios.

Conclusion

Axios est un client HTTP qui peut être inclus dans vos projets de nœud en utilisant le gestionnaire de package de nœuds ou dans votre projet JavaScript Vanilla en utilisant Axios hébergé par CDN. Axios est utilisé pour faire XMLHTTPREQUESTS à une API, et c'est strictement une bibliothèque basée sur les promesses. Dans cet article, nous avons appris à interagir avec une API externe à l'aide d'Axios et de faire OBTENIR, POSTE et SUPPRIMER Demandes au API.