Axios

Qu'est-ce qu'Axios ?

Axios est un client HTTP populaire pour le navigateur et Node.js, écrit en TypeScript. Il fournit une API pratique et moderne pour effectuer des requêtes HTTP asynchrones. La bibliothèque gère automatiquement les données JSON, prend en charge les intercepteurs (interceptors), la protection contre CSRF et l'annulation de requêtes.

Pourquoi utiliser Axios ?

Contrairement au fetch intégré, Axios propose une syntaxe plus intuitive, une transformation automatique des données et une gestion intégrée des erreurs. Il est idéal pour créer des clients d'API REST, travailler avec l'authentification et télécharger des fichiers. Grâce à la prise en charge de TypeScript, vous bénéficiez d'un typage strict pour toutes les requêtes et réponses.

Installation

Pour installer Axios dans un projet, utilisez npm ou yarn :

npm install axios# ouyarn add axios

Pour travailler avec TypeScript, installez les types (généralement déjà inclus) :

npm install @types/axios

Fonctionnalités principales

• Prise en charge de toutes les méthodes HTTP : GET, POST, PUT, DELETE, PATCH et autres.
• Sérialisation JSON automatique : les données sont transformées automatiquement.
• Intercepteurs (interceptors) : possibilité de traiter les requêtes et réponses globalement (par exemple, pour ajouter des tokens).
• Annulation de requêtes : en utilisant CancelToken ou AbortController.
• Téléchargement de fichiers : prise en charge de la progression du téléchargement via onUploadProgress.
• Protection contre CSRF : gestion automatique des cookies et des en-têtes.
• Typage : prise en charge complète de TypeScript avec des génériques.

Exemple de code en TypeScript

Requête GET de base avec typage de la réponse :

import axios, { AxiosResponse } from 'axios';

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get(`/api/users/${id}`);  return response.data;}

// UtilisationgetUser(1).then(user => console.log(user.name));

Exemple de requête POST avec envoi de données :

import axios from 'axios';

interface CreateUserPayload {  name: string;  email: string;}

const newUser: CreateUserPayload = { name: 'John', email: 'john@example.com' };

axios.post('/api/users', newUser)  .then(response => console.log('User created:', response.data))  .catch(error => console.error('Error:', error));

Exemple avec un intercepteur pour ajouter un token :

import axios from 'axios';

axios.interceptors.request.use(config => {  const token = localStorage.getItem('token');  if (token) {    config.headers.Authorization = `Bearer ${token}`;  }  return config;});

Quand utiliser Axios

Axios est idéal pour :

• Créer des applications clientes avec React, Vue, Angular ou Svelte.
• Les serveurs Node.js où un client HTTP pratique est nécessaire.
• Les projets où un typage strict TypeScript est important.
• Les situations nécessitant des intercepteurs, l'annulation de requêtes ou la progression du téléchargement.

Si vous utilisez fetch et souhaitez un code plus concis avec une gestion automatique des erreurs, Axios sera un excellent choix.