HTTP GET et POST avec Javascript et Axios


Axios est une librairie JavaScript utilisée pour envoyer et recevoir des données depuis un serveur web. Comme les requêtes http GET et POST.
di Antonio Lamorgese


Axios est une bibliothèque JavaScript pour effectuer des requêtes HTTP, GET et POST, utilisée pour envoyer et recevoir des données d’un serveur qui expose des API de services Web. Axios prend en charge diverses fonctionnalités telles que les requêtes HTTP asynchrones, l’interception des requêtes et des réponses, la gestion des erreurs, la sérialisation automatique des données, etc. Axios est très populaire pour sa facilité d’utilisation et sa polyvalence. L’un de ses points forts est la possibilité d’envoyer des requêtes synchrones et asynchrones.

Pourquoi utiliser Axios au lieu de jQuery ou fetch

Il existe plusieurs raisons pour lesquelles Axios pourrait être préféré à d’autres bibliothèques ou API natives comme jQuery ou Fetch:

a) Facilité d’utilisation: Axios est conçu pour être simple et intuitif à utiliser, ce qui en fait un bon choix pour ceux qui recherchent un moyen simple de faire des requêtes HTTP.

b) Compatibilité avec les technologies modernes: Axios est conçu pour fonctionner avec des technologies modernes telles que React et Angular, ce qui en fait un bon choix pour les projets basés sur ces technologies.

c) Prise en charge des requêtes asynchrones: Axios prend en charge les requêtes asynchrones, ce qui signifie que vous pouvez effectuer plusieurs requêtes simultanément et gérer la réponse une fois qu’elles sont disponibles.

d) Interception des requêtes: Axios vous permet d’intercepter et de gérer facilement les requêtes et les réponses, ce qui est utile pour gérer les jetons d’authentification ou ajouter des en-têtes personnalisés à chaque requête.

e) Prise en charge de la sérialisation des données: Axios vous permet de sérialiser automatiquement les données envoyées dans une requête, ce qui facilite grandement l’envoi de données complexes.

En résumé, Axios offre un certain nombre de fonctionnalités avancées qui en font un bon choix pour les projets qui nécessitent une solution puissante et flexible aux requêtes HTTP.


Lire la suite: ChatGPT en action avec CURL à partir de l’invite de commande


Comment inclure Axios dans une page Web

Avant d’utiliser Axios, vous devez obtenir la bibliothèque sur son site Web ou sur le référentiel officiel sur GitHub. Vous pouvez ensuite inclure la bibliothèque directement dans votre page Web.

Home page Axios
Home page Axios

Pour inclure Axios dans un fichier HTML, vous pouvez le faire de plusieurs manières, notamment:

a) Utiliser un CDN: Vous pouvez inclure Axios à l’aide d’un réseau de diffusion de contenu (CDN) tel que JSDelivr. Voici comment inclure Axios via JSDelivr:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

b) Télécharger le fichier localement: vous pouvez télécharger le fichier Axios depuis le site officiel, puis l’inclure en tant que fichier local dans votre projet. Voici comment inclure Axios en tant que fichier local:

<script src=" web_path/axios.min.js"></script>

Une fois que vous avez inclus Axios, vous pouvez utiliser la bibliothèque comme décrit dans les exemples précédents. Assurez-vous d’inclure Axios avant tout code qui l’utilise.

Accéder aux données météo avec Axios

OpenWeatherMap.org est un service Web qui fournit des informations météorologiques actuelles et des prévisions météorologiques dans le monde entier. Les utilisateurs peuvent accéder aux données climatiques, telles que la température, la vitesse du vent, la direction du vent, l’humidité, la pression atmosphérique et les conditions météorologiques actuelles, via une API qu’ils peuvent intégrer dans d’autres applications ou sites Web. Le service est gratuit pour une utilisation limitée et payant pour une utilisation plus professionnelle et étendue de son API.

Home page Openweather API
Home page Openweather API

Notez que cet exemple nécessite que vous remplaciez la chaîne « YOUR_APP_ID » par une clé d’API valide. Pour obtenir votre clé API, vous pouvez vous inscrire au service en cliquant sur ce lien. De plus, l’ API OpenWeatherMap vous oblige à accepter les conditions d’utilisation avant d’utiliser la clé API elle-même.

Voici un exemple d’utilisation d’ Axios pour accéder aux données météo proposées par le service « OpenWeatherMap.org »:

// Define the OpenWeatherMap API URL

const API_URL = 'https://api.openweathermap.org/data/2.5/weather?q=Rome,Italy&appid=YOUR_APP_ID';

<script>

// Make a GET request to the API

axios.get (API_URL)
.then (response => {
   // Handle next
   console.log( response.data );

})
.catch (error => {
   // Handle error
   console.error (error);

});

</script>

Dans cet exemple, Axios envoie une requête http GET à l’URL spécifiée dans la constante API_URL. Si la requête est traitée avec succès, les données renvoyées par l’API sont imprimées directement sur la console de votre navigateur Web. Sinon, l’erreur est gérée en affichant également le message d’erreur sur la console. Dans tous les cas, si vous saisissez l’URL transmise à Axios dans la barre d’adresse du navigateur, le navigateur imprimera la réponse qui lui sera envoyée par OpenWeatherMap au format JSON. La réponse ressemblera à ceci:

Réponse Json OpenWeather API
Réponse Json OpenWeather API

conclusion

En conclusion, Axios est une bibliothèque JavaScript très flexible et facile à utiliser pour effectuer des requêtes HTTP GET et POST à une API. Il présente de nombreux avantages par rapport à d’autres bibliothèques telles que jQuery ou fetch, telles que la gestion des demandes et des réponses asynchrones, la gestion des demandes abandonnées, la gestion des erreurs et la possibilité d’envoyer des demandes au format JSON.

Axios est soutenu par une large communauté de développeurs, qui continuent de le maintenir et de l’améliorer. Cela fait d’Axios l’une des options les plus fiables et sécurisées pour le traitement des requêtes HTTP.

En résumé, Axios est une excellente bibliothèque à considérer pour gérer les requêtes HTTP dans une application Web. Avec sa flexibilité, sa fiabilité et sa facilité.

Antonio Lamorgese

Administrateur réseau et développeur. Après des années d'expérience dans l'industrie, j'ai conçu un système de gestion de données MYSQL en PHP sans écrire une seule ligne de code. En savoir plus....