Comment Faire Une Demande Par Mail En Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Lors de la construction d’ une application web, il peut arriver un moment o√π vous voulez faire une requête HTTP pour accéder à une ressource externe. Par exemple, supposons que vous commencez un blog. Vous voudrez peut - être appeler une API pour récupérer une liste de commentaires à afficher sur chaque billet de blog.

Axios est une bibliothèque JavaScript populaire que vous pouvez utiliser pour faire des requêtes web. Dans ce guide, nous allons vous expliquer comment utiliser Axios pour faire une requête GET. Nous examinerons quelques exemples pour montrer comment Axios fonctionne et comment vous pouvez l’ utiliser dans votre code.

Pourquoi Axios?

Axios est une bibliothèque basée sur la promesse qui le rend facile à faire des demandes Web

Vous demandez peut - être:. Pourquoi devrais - je utiliser Axios sur l’ une des nombreuses autres bibliothèques de demande web là - bas? Il est vrai qu’il ya d’ autres bibliothèques comme extrayez que vous pouvez utiliser pour faire des requêtes GET, mais Axios a un certain nombre d’avantages que ces bibliothèques n’ont pas.

Axios prend en charge les navigateurs plus anciens, qui sera vous permettent de créer une expérience utilisateur plus accessible. Axios est également livré avec une protection CSRF intégrée pour prévenir les vulnérabilités. Il travaille également dans Node.js, ce qui le rend parfait si vous développez aux deux extrémités avant et applications web back-end.

Comment installer Axios

Avant de créer un GET demande en utilisant Axios, vous devez installer la bibliothèque. Vous pouvez le faire en utilisant la commande suivante:

Cette commande installera Axios et enregistrer dans le fichier package.json local. Vous êtes maintenant prêt à commencer à utiliser la bibliothèque Axios.

Comment faire une demande à l’ aide Axios

Mise en route avec Axios est simple. Pour faire une demande de web, il suffit de spécifier l’URL que vous souhaitez données de demande de et la méthode que vous souhaitez utiliser

Supposons que nous voulons récupérer une liste des faits de chat au hasard de chat -Faits Nous pourrions le faire en utilisant ce code:.

ce code retourne une promesse représentant une demande qui n’a pas encore complété pour récupérer les données de cette requête HTTP, vous devez utiliser une fonction asynchrone / d’attente comme ceci:

Le serveur wi a répondu avec une liste de faits de chat.

Lorsque nous appelons cette fonction, une requête HTTP GET est envoyée à l’API chat-faits. Nous utilisons une fonction asynchrone / d’attente pour que notre programme ne continue pas jusqu’à ce que la demande Web est terminée. En effet , Axios retourne une promesse en premier. Renvoie les données de la demande faite après la demande est terminée

La bibliothèque Axios comprend des commandes raccourcies que vous pouvez utiliser pour faire des demandes Web:.

Dans ce tutoriel, nous allons nous concentrer sur axios.get () et axios.post () , qui utilisent la même syntaxe de base que toutes les autres méthodes de sténographie.

Faire des requêtes GET à l’ aide Axios

Dans notre dernier exemple, nous avons Axios occasion de faire une requête GET. Mais il existe un moyen plus facile de faire une demande GET avec Axios:. Utilisant

axios.get () Supposons que nous voulons récupérer une liste des faits sur les chats, il compte combien ont été retournés. Vous pouvez le faire en utilisant le code suivant:

Le code généré cette réponse: 225 faits de chat ont été renvoyés

la rupture de Descendue notre code. Tout d’ abord , nous avons déclaré une fonction asynchrone appelé getCatFacts () dans lequel nous faisons une demande web.

Nous utilisons alors axios.get () pour récupérer une liste des faits de chat de l’API chat-faits; "Response.data" contient les objets de réponse et le corps de la demande de notre demande.

Enfin, nous utilisons l’attribut .length pour calculer le nombre de faits de chat ont été retournés par notre demande. Ensuite , on ajoute ce chiffre à la chaaîne "faits sur les chats ont été retournés.

Envoi d’en- têtes à l’ aide Axios

Lorsque vous faites une requête GET, vous devrez peut - être envoyer un en- tête personnalisé à la ressource Web auquel vous faites la demande. une API qui nécessite une authentification. Vous devrez peut - être spécifier un en- tête d’authentification

<. P> Pour spécifier un en- tête avec une demande d’Axios, vous pouvez utiliser le code suivant:

Ce code enverrait l’ en- tête "tête-name " avec la "valeur d’ en- tête" à l’ URL que nous avons spécifié.

Envoi paramètres à l’ aide Axios

De nombreuses API vous permettent d’envoyer des paramètres dans une requête GET. Par exemple, une API peut vous permettre de limiter le nombre de réponses renvoyées à l’ aide d’ un paramètre de limite.

Spécifier un paramètre à envoyer avec une demande web est facile à l’ aide Axios. Vous pouvez inclure le paramètre comme une chaaîne de requête ou utiliser la propriété params. Voici un exemple de Axios faisant une demande Web en utilisant les chaaînes de requête pour spécifier un paramètre:

vous pouvez spécifier une propriété params dans les options de Axios en utilisant ce code:

ces deux exemples envoyer un paramètre avec le nom" date " et la valeur" 15/05/2020 "à l’ URL spécifiée.

Comment faire une requête POST en utilisant Axios

la syntaxe pour faire une requête POST est le même que pour une requête GET. la différence est que vous devez utiliser le code <> axios.post () au lieu de axios.get () .

Supposons que vous voulez envoyer une demande à une publier API. vous pouvez le faire en utilisant le code suivant:

vous pouvez spécifier les en- têtes et les paramètres de la même façon que vous faire une requête GET. disons que vous voulez envoyer l’ en- tête "Nom" avec la valeur "James" avec votre requête POST. vous pouvez le faire en utilisant ce code:.

 Axios post ( "https://urlhere.com", {têtes: { "Nom": "James"}}) 

Conclusion

La bibliothèque Axios est utilisé pour faire des requêtes web en JavaScript. Il peut être utilisé aussi bien à l’extrémité avant l’ utilisation de JavaScript et à l’extrémité arrière à l’ aide d’ une plate - forme comme Node.js. Contrairement à d’ autres bibliothèques de requête Web, Axios a intégré la protection CSRF, supports anciens navigateurs, et utilise une structure de promesse. Il est parfait pour faire des demandes Web.

Vous êtes maintenant prêt à commencer à faire des requêtes GET et POST en utilisant Axios comme un développeur web professionnel.