Axios : appeler une API HTTP avec une configuration partagée

Le premier appel réseau d'un projet tient en trois lignes. Le vingtième traîne derrière lui la même adresse de base, le même en-tête d'autorisation et le même traitement d'erreur, recopiés vingt fois.

Axios existe pour écrire cette part commune une seule fois.

Définition

Axios est une bibliothèque cliente HTTP, utilisable dans le navigateur comme sous Node.js. Chaque appel rend une Promise, le corps JSON est déjà analysé, et un statut d'échec rompt la promesse au lieu de la tenir.

import axios from "axios";

const api = axios.create({
  baseURL: "https://api.exemple.com",
  timeout: 5000,
  headers: { "X-Client": "believemy" },
});

const { data } = await api.get("/factures/42");
console.log(data.montant);   // 19

L'instance créée porte l'adresse de base, le délai maximum et les en-têtes communs. Tout le reste du code n'écrit plus que le chemin, et une modification d'adresse ne touche qu'un seul fichier.

Ce qui le distingue de fetch

Le tableau tient en trois colonnes parce qu'il n'y a que trois questions à poser : le sujet, puis ce que chacun des deux clients en fait. La première ligne est de loin celle qui surprend le plus, un statut d'échec passant inaperçu avec fetch quand personne ne teste response.ok.

Les intercepteurs

Un intercepteur est une fonction appelée sur chaque requête ou chaque réponse de l'instance. C'est là que se posent le jeton d'authentification, la trace de journalisation ou la réaction commune à une session expirée.

api.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${lireJeton()}`;
  return config;
});

api.interceptors.response.use(
  (reponse) => reponse,
  (erreur) => {
    if (erreur.response?.status === 401) deconnecter();
    return Promise.reject(erreur);
  }
);

Questions fréquentes

Pour deux ou trois appels isolés, non : fetch est natif, sans dépendance à tenir à jour. Sur un projet qui multiplie les requêtes vers la même API, l'instance partagée et les intercepteurs font gagner un fichier entier de code répétitif. Beaucoup d'équipes écrivent aussi leur propre enveloppe autour de fetch, ce qui revient à reconstruire une partie d'Axios.

Avec un try autour de l'appel. L'objet reçu porte une propriété response quand le serveur a répondu, et son status permet de distinguer un 404 d'un 500. Quand cette propriété manque, la requête n'est jamais arrivée à destination, et le message à afficher n'est pas le même.

Oui, en passant un signal d'AbortController dans les options de l'appel. C'est le même mécanisme que celui de fetch, ce qui évite d'apprendre deux interfaces. Le cas d'usage classique reste la recherche à la frappe, où chaque nouvelle lettre doit annuler la requête précédente.