Frontend Academy · Leçon

Axios : intercepteurs et URL de base

Créez une instance Axios avec une baseURL, joignez les jetons d’authentification dans les intercepteurs de requêtes et gérez les erreurs 4xx/5xx dans les intercepteurs de réponses.

Leçon 2 sur 414 étapes

Axios : intercepteurs et URL de base est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Pourquoi utiliser Axios ?

Axios est un client HTTP populaire basé sur XMLHttpRequest. Il ajoute la gestion automatique du JSON, des intercepteurs de requêtes et de réponses, la configuration de baseURL, le délai d’expiration et des jetons d’annulation des requêtes. De nombreuses équipes le préfèrent encore à fetch.

Installer Axios

Installez-le avec npm. Le paquet navigateur fait environ 14 Ko une fois compressé avec gzip.

npm install axios

GET et POST de base

Axios convertit automatiquement les corps JSON en chaînes et analyse automatiquement les réponses JSON : aucun appel manuel à JSON.stringify ou à .json() n’est nécessaire.

import axios from 'axios';

const { data } = await axios.get('/api/users');
console.log(data); // already parsed

const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);

Créer une instance Axios

Créez une instance configurée pour votre API afin d’éviter de répéter l’URL de base, les en-têtes et le délai d’expiration à chaque appel.

import axios from 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });

Intercepteur de requête : jeton d’authentification

Injectez le jeton d’authentification dans chaque requête sans répéter le même code.

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

Intercepteur de réponse : erreurs globales

Centralisez la gestion des erreurs pour toutes les réponses : redirigez en cas de 401, affichez une notification en cas de 5xx, etc.

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      window.location.href = '/login';
    }
    if (error.response?.status >= 500) {
      toast.error('Server error. Please try again.');
    }
    return Promise.reject(error);
  }
);

Actualisation du jeton après une réponse 401

Utilisez un intercepteur de réponse pour détecter une réponse 401, actualiser le jeton et relancer la requête d’origine de manière transparente.

api.interceptors.response.use(null, async (error) => {
  const originalRequest = error.config;
  if (error.response?.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    const newToken = await refreshToken();
    localStorage.setItem('token', newToken);
    originalRequest.headers.Authorization = `Bearer ${newToken}`;
    return api(originalRequest); // retry
  }
  return Promise.reject(error);
});

Paramètres d’URL et requête

Axios accepte un objet params — celui-ci est automatiquement sérialisé en chaîne de requête.

const { data } = await api.get('/search', {
  params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2

Délais d’expiration

Définissez un délai d’expiration pour éviter qu’une requête ne reste bloquée sur un serveur lent.

api.get('/slow-endpoint', { timeout: 5000 })
  .catch(err => {
    if (err.code === 'ECONNABORTED') {
      console.log('Request took too long');
    }
  });

Annulation des requêtes

Utilisez AbortController (Axios moderne) ou un CancelToken (ancienne API).

const controller = new AbortController();

api.get('/big-data', { signal: controller.signal })
  .catch(err => {
    if (axios.isCancel(err)) console.log('cancelled');
  });

controller.abort();

Structure de l’objet d’erreur

Les erreurs Axios contiennent error.response (le serveur a répondu avec un statut d’erreur), error.request (aucune réponse reçue), ou ni l’un ni l’autre (la configuration de la requête a échoué).

Axios ou Fetch — quand choisir

Axios : API plus claire, intercepteurs intégrés, gestion des erreurs plus concise. Fetch : natif, paquet plus léger, prise en charge moderne des flux. Les nouveaux projets choisissent souvent fetch + une fine couche d’abstraction ; les projets Axios existants migrent rarement.

Vérification rapide

Quelle fonctionnalité d’Axios vous permet d’ajouter un en-tête d’autorisation à chaque requête sans modifier chaque appel individuel ?

Réponds-y dans la leçon interactive

Récapitulatif : Axios

axios.create() pour créer des instances configurées avec baseURL et un délai d’expiration. Réponses JSON analysées automatiquement (res.data). Les intercepteurs de requête ajoutent les jetons ; les intercepteurs de réponse gèrent les erreurs et actualisent les jetons. Objet params pour les chaînes de requête. AbortController pour l’annulation. Choisissez Axios pour sa simplicité ; fetch + une couche d’abstraction pour un paquet plus léger.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Axios : intercepteurs et URL de base » est-elle gratuite ?

Oui — le texte complet de « Axios : intercepteurs et URL de base » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Axios : intercepteurs et URL de base » ?

Créez une instance Axios avec une baseURL, joignez les jetons d’authentification dans les intercepteurs de requêtes et gérez les erreurs 4xx/5xx dans les intercepteurs de réponses. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Axios : intercepteurs et URL de base » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

API Fetch : GET, POST, PUT et DELETE
Axios : intercepteurs et URL de base
Gestion des erreurs : codes d’état HTTP
SWR et React Query pour la mise en cache des données

← Retour à Frontend Academy