Ce qu'Axios apporte encore par rapport à Fetch

L’API Fetch a beaucoup mûri. Elle est intégrée à tous les navigateurs modernes, disponible nativement dans Node.js depuis la v18 grâce à Undici, et capable de gérer le JSON, l’annulation de requêtes et le streaming. Pour bon nombre de requêtes API frontend, elle suffit largement.

Alors pourquoi les équipes continuent-elles à se tourner vers Axios ? Pas par habitude, mais parce qu’Axios résout encore des problèmes spécifiques d’expérience développeur que Fetch laisse à votre charge. Voici où l’écart se manifeste réellement.

Axios vs Fetch : où sont les vraies différences

1. Une gestion des erreurs HTTP qui fonctionne par défaut

Fetch ne rejette qu’en cas d’échec réseau. Une réponse 404 ou 500 est résolue avec succès — vous devez vérifier response.ok vous-même à chaque fois.

// Fetch — vérification manuelle obligatoire
const res = await fetch('/api/user');
if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
const data = await res.json();

// Axios — rejette automatiquement sur 4xx/5xx par défaut
const { data } = await axios.get('/api/user');

Dans les grandes applications comportant des dizaines d’endpoints, cette vérification manuelle devient un code répétitif fastidieux. Axios l’élimine en grande partie par défaut.

2. Intercepteurs de requêtes et de réponses intégrés

C’est la fonctionnalité la plus citée par les développeurs lorsqu’ils choisissent Axios. Les intercepteurs vous permettent d’attacher de la logique — jetons d’authentification, journalisation, normalisation des erreurs — une seule fois, globalement, sans toucher aux requêtes individuelles.

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

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) redirectToLogin();
    return Promise.reject(error);
  }
);

Avec Fetch, vous pouvez simuler ce comportement en encapsulant fetch() dans une fonction personnalisée. Mais ce wrapper n’est pas composable, n’est pas empilable, et vous devez le maintenir vous-même.

3. Configuration partagée avec les instances Axios

Axios vous permet de créer des instances isolées avec des URL de base, des en-têtes et des délais d’expiration prédéfinis — un schéma véritablement utile lorsque votre application communique avec plusieurs API.

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 8000,
  headers: { 'X-App-Version': '2.1.0' },
});

Reproduire cela proprement avec Fetch nécessite une classe wrapper ou une fonction factory. C’est faisable, mais c’est un périmètre supplémentaire à assumer.

4. Suivi de la progression des téléversements

Fetch n’a toujours pas d’API native standardisée pour la progression des téléversements dans les navigateurs. Axios expose directement onUploadProgress, basé sur XMLHttpRequest en coulisse dans les navigateurs.

await axios.post('/upload', formData, {
  onUploadProgress: e => {
    if (e.total) {
      console.log(`${Math.round((e.loaded / e.total) * 100)}%`);
    }
  },
});

Si vous avez besoin de la progression de téléversement dans une configuration uniquement basée sur Fetch, vous devrez revenir à un XMLHttpRequest brut. C’est une véritable régression.

5. Configuration du timeout sans le boilerplate d’AbortController

Axios accepte directement une option timeout. Fetch exige que vous configuriez manuellement AbortController et setTimeout — ce qui fonctionne, mais ajoute du bruit.

// Axios
await axios.get('/api/data', { timeout: 5000 });

// Équivalent Fetch
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 5000);
try {
  const res = await fetch('/api/data', { signal: controller.signal });
} finally {
  clearTimeout(id);
}

Les environnements modernes prennent également en charge AbortSignal.timeout(), ce qui raccourcit considérablement le code, et le support des navigateurs est désormais largement disponible.

Comparaison rapide : fonctionnalités d’Axios vs API Fetch

Conclusion

Fetch n’est pas insuffisant. Pour les clients HTTP JavaScript simples — quelques endpoints, pas de logique d’authentification partagée, pas de progression de téléversement — c’est le bon choix par défaut. Aucune dépendance, aucune surcharge.

Mais Axios justifie sa place lorsque vos requêtes API frontend gagnent en complexité. Les intercepteurs, les instances partagées, la gestion automatique des erreurs et la progression des téléversements ne sont pas des fonctionnalités qui vous manqueront avant d’en avoir besoin — et alors, vous les voudrez intégrées, pas développées à la main. C’est ce qu’Axios continue de vous offrir.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.