Axios : qu´est-ce que c´est, requêtes HTTP et bases du travail avec API

Qu´est-ce qu´Axios ?

Axios est une bibliothèque JavaScript conçue pour effectuer des requêtes HTTP depuis le navigateur et l´environnement Node.js. Elle est construite sur XMLHttpRequest dans le navigateur et le module http dans Node.js, fournissant une API unifiée pour les deux plateformes.

Le principal avantage d´Axios par rapport au fetch natif est la gestion automatique du JSON, la prise en charge des intercepteurs et une gestion des erreurs plus pratique. Contrairement à fetch, Axios ne nécessite pas deux appels .then pour obtenir le corps JSON de la réponse et lève automatiquement des exceptions en cas d´erreurs HTTP (4xx, 5xx).

La bibliothèque prend en charge toutes les méthodes HTTP principales : GET, POST, PUT, DELETE, PATCH et HEAD. Elle peut être utilisée aussi bien dans des projets simples que dans de grandes applications d´entreprise avec des centaines de milliers de requêtes quotidiennes.

Caractéristiques principales d´Axios

• Promise API — toutes les opérations retournent une Promise, simplifiant le code asynchrone
• Support TypeScript — typage complet pour toutes les méthodes et configurations
• Intercepteurs — middleware pour traiter les requêtes et réponses
• Transformation — transformation automatique des données en entrée et sortie

Architecture d´Axios et principe de fonctionnement

L´architecture d´Axios est basée sur le concept d´adaptateurs. La bibliothèque abstrait la couche de transport : elle utilise XMLHttpRequest dans le navigateur et le module http ou https dans Node.js. Cela fournit une interface unique indépendamment de l´environnement d´exécution.

Chaque requête traverse une chaîne d´intercepteurs qui peuvent modifier la configuration de la requête ou la réponse. Après les intercepteurs, la requête est transmise à l´adaptateur, qui effectue l´appel HTTP réel. La réponse traverse ensuite les intercepteurs de réponse avant d´atteindre le code de l´application.

Cycle de vie d´une requête Axios

1. Création de configuration — méthode, URL, en-têtes, corps de la requête
2. Intercepteur de requête — modification de la configuration, ajout de jetons
3. Appel HTTP — exécution via l´adaptateur navigateur ou Node.js
4. Intercepteur de réponse — transformation de la réponse, gestion des erreurs
5. Retour du résultat — Promise résolue avec les données ou rejetée

Principales fonctionnalités d´Axios

Axios comprend de nombreuses fonctionnalités intégrées qui en font un choix pratique pour travailler avec HTTP dans les applications mobiles et web. Examinons les principales.

Transformation automatique des données

Lors de l´envoi d´une requête, Axios transforme automatiquement un objet JavaScript en chaîne JSON à l´aide de JSON.stringify. Lors de la réception d´une réponse, la bibliothèque convertit le JSON en objet. Cela évite au développeur la sérialisation et désérialisation manuelles des données.

Protection CSRF

Dans l´environnement navigateur, Axios ajoute automatiquement les en-têtes XSRF-TOKEN à partir des cookies, protégeant l´application contre la falsification de requête intersite. Pour cela, il suffit de configurer le serveur pour envoyer le jeton dans un cookie nommé XSRF-TOKEN.

Timeouts et annulation de requêtes

La bibliothèque prend en charge la définition d´un timeout via le paramètre timeout et l´annulation de requête via AbortController. Ceci est particulièrement important dans les applications mobiles avec des connexions instables, où les requêtes bloquées consomment batterie et données.

Installation et configuration d´Axios

L´installation d´Axios se fait via n´importe quel gestionnaire de paquets. La bibliothèque est disponible dans le registre npm et peut être utilisée aussi bien dans des projets Node.js que navigateur. Pour TypeScript, les types sont inclus dans le paquet principal — aucune dépendance supplémentaire n´est nécessaire.

Après l´installation, vous pouvez créer une instance avec une configuration de base : URL de base, timeout par défaut, en-têtes communs. Cela évite de répéter les mêmes paramètres dans chaque requête et permet de gérer centralisément les paramètres du client HTTP.

# Installer via npm
npm install axios

# Installer via yarn
yarn add axios

# Installer via pnpm
pnpm add axios

Création d´une instance avec configuration

Il est recommandé de créer une instance séparée d´Axios pour chaque service API. Cela permet de définir une URL de base, des en-têtes standard et un timeout qui s´appliqueront à toutes les requêtes de cette instance sans les répéter dans chaque appel.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Exemples de code avec Axios

Les exemples de requêtes montrent les principaux modèles d´utilisation d´Axios. Tous les exemples utilisent la syntaxe async/await, qui rend le code asynchrone plus lisible par rapport aux chaînes .then().

Requête GET avec paramètres

Pour obtenir des données du serveur, la méthode axios.get est utilisée. Les paramètres de requête sont transmis via l´objet params, qui est automatiquement transformé en chaîne de requête. La réponse contient les données dans le champ data, le statut dans status et les en-têtes dans headers.

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

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('Erreur de chargement des utilisateurs', error);
    throw error;
  }
}

Requête POST avec corps

Pour envoyer des données au serveur, axios.post est utilisé. Le deuxième argument est un objet avec des données, qu´Axios sérialise automatiquement en JSON. Le Content-Type est défini sur application/json par défaut.

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

Intercepteurs

Les intercepteurs sont des fonctions middleware qui s´exécutent pour chaque requête ou réponse. Ils permettent d´ajouter des jetons d´authentification, de journaliser les requêtes et de gérer les erreurs de manière centralisée. Un intercepteur de requête ajoute l´en-tête Authorization avec un jeton récupéré du stockage.

// Intercepteur de requête — ajoute un jeton d´authentification
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Intercepteur de réponse — gère les erreurs 401
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Gestion des erreurs dans Axios

La gestion des erreurs dans Axios repose sur le mécanisme d´exceptions. Contrairement à fetch, Axios intercepte automatiquement les erreurs HTTP (4xx, 5xx) et les transmet au bloc catch. L´objet d´erreur contient des informations sur la réponse du serveur, la requête et le contexte d´exécution.

Il est important de distinguer trois types d´erreurs : l´erreur de réponse du serveur (response), l´erreur de requête (request) et l´erreur de configuration (config). La première survient lorsqu´un appel HTTP est exécuté avec succès mais retourne un code d´erreur, la seconde lorsqu´il n´y a pas de réponse du serveur, et la troisième lorsque la configuration de la requête est incorrecte.

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('Erreur de réponse', error.response.status);
      } else if (error.request) {
        console.warn('Pas de réponse du serveur');
      } else {
        console.warn('Erreur de configuration');
      }
    }
  }
}

Comparaison d´Axios avec Fetch API

La comparaison d´Axios avec la Fetch API native aide à comprendre quand chaque technologie est appropriée. Fetch est une API intégrée au navigateur qui ne nécessite pas d´installation. Axios est une bibliothèque tierce avec des fonctionnalités supplémentaires. Pour les requêtes simples, fetch suffit ; pour les applications complexes avec intercepteurs et gestion centralisée des erreurs, Axios est plus pratique.

Fetch ne considère pas les erreurs HTTP (4xx, 5xx) comme des exceptions — il faut vérifier response.ok. Fetch nécessite deux appels .then() pour obtenir le JSON : response.json() retourne ensuite une Promise avec les données. Axios le fait automatiquement. Fetch ne prend pas en charge la progression du téléchargement de fichiers sans polyfills supplémentaires. Axios dispose d´onUploadProgress et onDownloadProgress intégrés.

Dans Node.js, Fetch est disponible depuis la version 18 en tant que fonctionnalité expérimentale, tandis qu´Axios fonctionne de manière stable depuis Node.js 10. Pour les projets prenant en charge d´anciennes versions de Node.js, le choix est clairement en faveur d´Axios. Pour les projets navigateur modernes sans traitement complexe des requêtes, fetch peut être suffisant.