Faire une requête HTTP pour récupérer ou envoyer des données est l'un des tâches les plus communes d'une application JavaScript.

Il y a de nombreuses façons de le faire ainsi que de nombreuses librairies.

Les navigateurs modernes ont introduit Fetch API, pourquoi ne pas utiliser juste ça ? 🤨

Tout comme jQuery dans son temps, Axios a gagné en popularité dans la communauté Open source des développeurs JavaScript.

Fetch vs Axios

Les codes d'erreurs

La première différence notable est la manière dont ils gèrent les codes d'erreurs HTTP.

Lorsque que Fetch reçoit une erreur 4xx ou 5xx, la callback catch() n'est même pas déclenchée et force les développeurs à vérifier le statut de la requête pour déterminer si la requête a été un succès ou non.

À l'inverse, Axios va rejeter la requête dans le catch() si l'un de ces codes de statuts est retourné !

Il est admis publiquement que nous, développeurs, aimons quand le flow d'information et de traitement est fluide, sans surprises ! 😉

Progression

Une autre différence qui me tient à coeur est la possibilité de souscrire une fonction callback sur onUploadProgress et onDownloadProgress pour pouvoir afficher dans le code client l'éventuelle progression d'un téléchargement ou d'un upload.

Dernièrement, Axios peut être utilisé *à la fois sur navigateur et sur NodeJS, ce qui facilite le partage de code JavaScript entre le navigateur, le backend ou du server-side rendering pour votre application frontend !

Installation

Installons notre package :

npm install --save axios

Pour l'importer, rien de plus simple :

//	ES2015
import axios from "axios";

//	ES5
const axios = require("axios");

A savoir, Axios fonctionne parfaitement sur tous les navigateurs modernes et IE 8+.

Faire une requête

On demande à Axios de faire une requête HTTP en mode GET à une API de test.

	axios({
		method: 'get',
		url: 'https://jsonplaceholder.typicode.com/posts'
	})
	.then((response) => {
		console.log("Réponse : ", JSON.stringify(response));
		console.log("Premier element dans data : ", JSON.stringify( response.data[0] ) );
	})

Console :
En attente d'exécution

Pour faire une requête POST :

	axios({
		method: 'post',
		url: 'https://jsonplaceholder.typicode.com/posts',
		data: {
			title: "Le Roi Lion",
			body: "C'est l'histoire de la viiiiiiiiiiiie !"
		}
	})
	.then((response) => {
		console.log("Réponse : ", JSON.stringify(response));
	})

Console :
En attente d'exécution

Lors d'un POST, Axios va automatiquement sérialiser votre objet en JSON pour l'envoyer dans le request body.

Il est donc assez simple d'utiliser Axios pour nos besoins de communications.

Quand une requête est réussie, le then() aura une callback en paramètre avec un objet réponse avec les propriétés :

  • status : code HTTP de réponse du serveur
  • statusText : le message de status HTTP de réponse du serveur
  • headers : les headers de réponse du serveur
  • config : la configuration originale de la requête
  • request : l'objet XMLHttpRequest, uniquement sur navigateur
  • data : le charge de réponse du serveur, autrement dit les données renvoyés du serveur. Par défault Axios attends un format JSON et va le parser automatiquement !

Lors d'une erreur à une requête, la promise sera rejetée dans la callback du catch() avec une erreur avec les propriétés :

  • config : la configuration originale de la requête
  • request : l'objet XMLHttpRequest, uniquement sur navigateur (encore ! 🙃 )
  • message : le message d'erreur
  • response : le résultat de la requête dont les propriétés sont décrites juste avant !

Convenience methods

Bel anglicisme, n'est-ce pas ? 😆

Comme beaucoup de librairies, notamment jQuery, il y a des méthodes raccourcis pour les différents types de requêtes.

Les modes get, delete, head et options prennent deux arguments : l'url et un objet de configuration.

	axios.get('https://jsonplaceholder.typicode.com/posts')

Alors que pour les modes post, put et patch, ils prennent comme second argument un objet de données et un troisième de configuration :

	axios.post(
		'https://jsonplaceholder.typicode.com/posts',
		{
			title: "Le Roi Lion",
			body: "C'est l'histoire de la viiiiiiiiiiiie !"
		},
		{
			// options ?
		}
	)

On verra dans un prochain article plus détaillé concernant les intercepteurs et les addons qu'on peut utiliser avec Axios !

Je conseille vraiiiiiment de faire le détour, c'est très utile d'avoir une seule librairie pour gérer les requêtes HTTP pour l'ensemble de la stack d'une application.

Les développeurs ne s'y perdent pas, utilisent le même outil et peuvent échanger plus facilement pour les approches à avoir 😀

function userInteraction(article) {

	const { user, david } = article.humans;

	if (user.likeArticle) {
		if (!user.isFanFacebookPage) {
			user.likeFacebookPage();
		}
		user.shareFacebook();
		user.shareTwitter();
		user.shareLinkedin();
		david.notifyThankYou();
	} else {
		david.noOffence();
		david.notifyStillLoveYou();
	}

}

userInteraction(this);
Partages ! 😉