Axios

Qu'est-ce qu'Axios ?

Axios est un client HTTP populaire basé sur les Promesses pour le navigateur et Node.js, écrit en TypeScript. Il fournit une interface pratique et puissante pour effectuer des requêtes HTTP, prend en charge les intercepteurs (interceptors), la transformation automatique des données JSON et la protection contre CSRF. La bibliothèque est idéale pour les applications web modernes nécessitant une gestion flexible des API REST.

Pourquoi utiliser Axios ?

Contrairement à l'API fetch native, Axios analyse automatiquement le JSON, traite les erreurs de statut HTTP (par exemple, 404 ou 500) comme des exceptions, prend en charge l'annulation des requêtes et les barres de progression de téléchargement. Pour les projets TypeScript, Axios offre un typage strict des réponses et des requêtes, ce qui simplifie le développement et réduit le nombre de bugs. Si vous écrivez en TypeScript et travaillez avec des API, Axios est le choix standard.

Installation

npm install axios

Pour les projets TypeScript, les types sont déjà inclus dans le paquet ; il n'est pas nécessaire d'installer @types/axios séparément.

Fonctionnalités principales

• Prise en charge de toutes les méthodes HTTP : GET, POST, PUT, DELETE, PATCH et autres.
• Transformation automatique des données : les réponses sont automatiquement analysées en JSON, et les objets de requête sont sérialisés.
• Intercepteurs (interceptors) : possibilité d'ajouter une logique avant l'envoi d'une requête ou après la réception d'une réponse (par exemple, pour ajouter un token d'authentification).
• Annulation des requêtes : via CancelToken ou AbortController.
• Délais d'attente et progression : configuration du temps d'attente et suivi de la progression du téléchargement/téléversement.
• Typage strict : prise en charge des génériques pour typer le corps de la réponse.

Exemple de code en TypeScript

import axios, { AxiosResponse } from 'axios';

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

async function fetchUser(id: number): Promise<User> {  try {    const response: AxiosResponse<User> = await axios.get<User>(`https://api.example.com/users/${id}`);    return response.data;  } catch (error) {    if (axios.isAxiosError(error)) {      console.error('Axios error:', error.message);    } else {      console.error('Unexpected error:', error);    }    throw error;  }}

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

Quand utiliser Axios

Axios est parfait pour tout projet TypeScript nécessitant une interaction avec des serveurs HTTP : des simples SPA aux applications serveur complexes sur Node.js. Il est particulièrement utile lorsque vous avez besoin d'une gestion avancée des erreurs, d'une sérialisation automatique des données ou de travailler avec plusieurs API. Si vous utilisez React, Vue ou Angular, Axios s'intègre facilement grâce à la prise en charge des intercepteurs et de l'annulation des requêtes.

La bibliothèque est activement maintenue, possède une immense communauté et est utilisée dans des milliers de projets. Axios est une solution mature et stable qui ne nécessite aucune dépendance supplémentaire.