Axios maîtrise les clients HTTP officiellement recommandés par Mastering JS. Nous utilisons occasionnellement le superagent, mais nous n’utilisons presque jamais la fonction fetch(). La raison en est qu’Axios réduit considérablement la quantité d’éléments nécessaires pour une requête API moyenne. Voici quelques raisons à cela :
Axios est isomorphe, fetch n’est pas
La syntaxe de la plupart des requêtes Axios de base est la même dans Node.js et dans le navigateur. Comme Node.js n’a pas de fonction fetch() intégrée, vous devez utiliser un polyfill comme node-fetch. Et il existe plusieurs différences connues entre node-fetch et browser fetch().
Axios lance une erreur lorsqu’une requête échoue
L’un des problèmes les plus ennuyeux avec fetch() est qu’il ne lance pas d’erreur lorsque le serveur répond avec un statut d’erreur HTTP, comme 404 ou 500.
fetch('https://httpbin.org/post').catch(err => {
/* No error even though the server responded with 405 */
});
axios.get('https://httpbin.org/post').catch(err => {
err.response.status; // 405 "METHOD NOT ALLOWED"
});
Cependant, fetch() lance une erreur si elle ne peut pas atteindre le serveur, vous avez donc toujours besoin de deux chemins distincts de traitement des erreurs avec fetch(). La situation est encore pire avec async/await : chaque fetch() a besoin d’un then() supplémentaire pour faire apparaître les erreurs.
La gestion des erreurs Axios est beaucoup plus simple : il suffit d’utiliser catch().
Sérialisation et analyse automatique JSON et Form-Encoded
La plupart des API modernes utilisent le JSON ou le codage de formulaire pour les organismes demandeurs. Axios gère automatiquement le JSON et l’encodage des formulaires, ainsi que la sérialisation automatique des chaînes de requête.
// Serialize JSON body and query params with fetch:
body = JSON.stringify(body);
query = new URLSearchParams(query).toString();
const res = await fetch('/myendpoint?' + query, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body
});
// Serialize JSON body and query params with axios:
await axios.post('/myendpoint', { params: query, body });
Caractéristiques du Framework : Intercepteurs et instances
Avec toutes ces limitations, la malheureuse réalité est que tous ceux qui utilisent fetch() écrivent leur propre enveloppe autour de fetch(). Il est extrêmement difficile de construire une application en utilisant directement fetch().
Axios vous permet d’aller plus loin en fournissant des fonctionnalités de type framework. Vous pouvez utiliser des intercepteurs et des instances pour créer vos propres enveloppes d’API en utilisant Axios. Par exemple, voici comment vous pouvez construire un client API Trello en utilisant des instances et des intercepteurs :
Ainsi, Axios ne se contente pas d’éliminer une grande partie des enjeux dans le développement et des limitations de fetch(), mais il facilite également la construction d’emballages spécifiques pour différentes API.
