1. Pourquoi Axios ?

Axios est un client HTTP basé sur les Promises, fonctionnant aussi bien dans le navigateur que dans Node.js. Il simplifie drastiquement les appels réseau par rapport à l'API fetch native grâce à plusieurs fonctionnalités intégrées.

fetch natif vs Axios

Installation

# Via npm (Node.js / bundler)
npm install axios

# Via CDN (navigateur, sans bundler)
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Premier appel

// GET de base avec Axios
axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    console.log(response.data); // tableau d'utilisateurs
    console.log(response.status); // 200
  })
  .catch(error => {
    console.error('Erreur :', error.message);
  });

// Avec async/await (recommandé)
async function chargerUtilisateurs() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log(response.data); // JSON déjà parsé !
  } catch (error) {
    console.error('Erreur :', error.message);
  }
}

2. Méthodes HTTP

Axios expose une méthode pour chaque verbe HTTP. Chaque méthode retourne une Promise qui se résout en un objet response ou se rejette en cas d'erreur réseau ou HTTP.

axios.get(url, config?)

// GET — récupérer des données
const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
console.log(response.data); // { id: 1, title: '...', ... }

// GET avec paramètres de query (?userId=1&_limit=5)
const res = await axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: { userId: 1, _limit: 5 }
});
console.log(res.data); // tableau de 5 posts de l'utilisateur 1

axios.post(url, data, config?)

// POST — créer une ressource
const nouvelArticle = {
  title: 'Mon article',
  body: 'Contenu de l\'article',
  userId: 1
};

const response = await axios.post(
  'https://jsonplaceholder.typicode.com/posts',
  nouvelArticle
);
console.log(response.data);   // { id: 101, title: '...', ... }
console.log(response.status); // 201 Created

axios.put(url, data, config?)

// PUT — remplacer entièrement une ressource
const articleMisAJour = {
  id: 1,
  title: 'Titre modifié',
  body: 'Nouveau contenu complet',
  userId: 1
};

const response = await axios.put(
  'https://jsonplaceholder.typicode.com/posts/1',
  articleMisAJour
);
console.log(response.data); // { id: 1, title: 'Titre modifié', ... }

axios.patch(url, data, config?)

// PATCH — modifier partiellement une ressource
const response = await axios.patch(
  'https://jsonplaceholder.typicode.com/posts/1',
  { title: 'Nouveau titre seulement' } // seul le titre est modifié
);
console.log(response.data);

axios.delete(url, config?)

// DELETE — supprimer une ressource
const response = await axios.delete(
  'https://jsonplaceholder.typicode.com/posts/1'
);
console.log(response.status); // 200

// Vérifier la suppression
if (response.status === 200) {
  console.log('Article supprimé avec succès');
}

3. Configuration

Axios offre de nombreuses options de configuration, passées soit globalement, soit par requête, soit via une instance personnalisée créée avec axios.create().

Objet de configuration

// Toutes les options courantes
const config = {
  baseURL: 'https://api.monservice.com',  // préfixe pour toutes les URLs
  timeout: 5000,                           // annulation si > 5 secondes
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer mon-token-jwt'
  },
  params: {                                // paramètres de query string
    page: 1,
    limit: 20
  },
  responseType: 'json',                   // 'blob', 'stream', 'text'...
  withCredentials: false                  // envoyer cookies cross-origin
};

const response = await axios.get('/users', config);

axios.create() — Instance personnalisée

// Créer une instance préconfigurée (pattern recommandé)
const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 8000,
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'ma-valeur'
  }
});

// Utiliser l'instance comme axios normal
const users = await apiClient.get('/users');
const post = await apiClient.post('/posts', { title: 'Test', userId: 1 });

// Avantage : chaque service peut avoir sa propre instance
const authApi = axios.create({ baseURL: 'https://auth.monsite.com', timeout: 3000 });
const dataApi = axios.create({ baseURL: 'https://data.monsite.com', timeout: 10000 });

Paramètres de query — params

// Axios sérialise automatiquement l'objet params en query string
// params: { page: 2, limit: 10 }  →  ?page=2&limit=10

const response = await axios.get('https://dummyjson.com/products', {
  params: {
    limit: 10,
    skip: 20,
    select: 'title,price,category'
  }
});
// URL finale : https://dummyjson.com/products?limit=10&skip=20&select=title,price,category

4. Réponse et Erreurs

Axios retourne un objet response structuré. En cas d'erreur HTTP (4xx, 5xx) ou réseau, la Promise est rejetée avec un objet error enrichi.

Structure de l'objet response

const response = await axios.get('/posts/1');

console.log(response.data);    // corps de la réponse (JSON parsé)
console.log(response.status);  // 200, 201, 204...
console.log(response.statusText); // "OK"
console.log(response.headers); // en-têtes de la réponse
console.log(response.config);  // config de la requête originale
console.log(response.request); // objet XMLHttpRequest (navigateur)

Gestion d'erreurs — try/catch

async function chargerPost(id) {
  try {
    const response = await axios.get(`/posts/${id}`);
    return response.data;

  } catch (error) {
    if (error.response) {
      // Erreur HTTP : le serveur a répondu avec un code d'erreur
      console.error('Erreur HTTP :', error.response.status);
      console.error('Message :', error.response.data);
      // 404 → ressource introuvable
      // 401 → non authentifié
      // 403 → non autorisé
      // 500 → erreur serveur

    } else if (error.request) {
      // Requête envoyée mais pas de réponse (timeout, réseau coupé)
      console.error('Pas de réponse du serveur :', error.request);

    } else {
      // Erreur lors de la configuration de la requête
      console.error('Erreur de configuration :', error.message);
    }
    throw error; // re-lancer pour que l'appelant puisse gérer
  }
}

axios.isAxiosError() — Typage de l'erreur

try {
  await axios.get('/utilisateur/999');
} catch (error) {
  if (axios.isAxiosError(error)) {
    // On sait que c'est une erreur Axios
    console.log('Status :', error.response?.status);
    console.log('URL :', error.config?.url);

    if (error.response?.status === 404) {
      afficherMessage('Ressource introuvable');
    } else if (error.response?.status >= 500) {
      afficherMessage('Erreur serveur — réessayez plus tard');
    }
  }
}

5. Intercepteurs

Les intercepteurs permettent d'exécuter du code avant chaque requête ou après chaque réponse. Parfaits pour l'authentification, le logging, ou la gestion centralisée des erreurs.

Intercepteur de requête

// Ajouter automatiquement le token JWT à chaque requête
axios.interceptors.request.use(
  (config) => {
    // Exécuté AVANT l'envoi de la requête
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    console.log(`→ ${config.method?.toUpperCase()} ${config.url}`);
    return config; // IMPORTANT : toujours retourner config
  },
  (error) => {
    // Erreur lors de la configuration
    return Promise.reject(error);
  }
);

Intercepteur de réponse

// Gestion centralisée des erreurs d'authentification
axios.interceptors.response.use(
  (response) => {
    // Exécuté pour toute réponse 2xx
    console.log(`← ${response.status} ${response.config.url}`);
    return response; // IMPORTANT : toujours retourner response
  },
  (error) => {
    // Exécuté pour toute erreur HTTP
    if (error.response?.status === 401) {
      // Token expiré → rediriger vers la page de connexion
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    if (error.response?.status === 429) {
      // Rate limiting → attendre et réessayer
      console.warn('Trop de requêtes — réessayez dans quelques secondes');
    }
    return Promise.reject(error);
  }
);

Intercepteurs sur une instance

const api = axios.create({ baseURL: 'https://api.example.com' });

// Intercepteurs spécifiques à cette instance
const requestInterceptor = api.interceptors.request.use(config => {
  config.headers['X-Request-Time'] = Date.now().toString();
  return config;
});

// Supprimer un intercepteur si nécessaire
api.interceptors.request.eject(requestInterceptor);

6. Annulation de Requêtes

Annuler une requête en cours est essentiel pour les performances : éviter les race conditions lors d'une recherche en temps réel, annuler les requêtes pendantes lors d'un changement de page, ou respecter les timeouts définis par l'utilisateur.

AbortController avec Axios

// AbortController — standard Web API, supporté par Axios
const controller = new AbortController();

// Passer le signal à la requête
axios.get('https://jsonplaceholder.typicode.com/posts', {
  signal: controller.signal
}).then(response => {
  console.log('Données reçues :', response.data.length, 'posts');
}).catch(error => {
  if (axios.isCancel(error) || error.name === 'CanceledError') {
    console.log('Requête annulée');
  } else {
    console.error('Erreur :', error.message);
  }
});

// Annuler après 2 secondes
setTimeout(() => {
  controller.abort();
  console.log('Requête annulée manuellement');
}, 2000);

Cas pratique — Recherche en temps réel

let controllerRecherche = null;

async function rechercherProduits(terme) {
  // Annuler la requête précédente si elle existe encore
  if (controllerRecherche) {
    controllerRecherche.abort();
  }
  controllerRecherche = new AbortController();

  try {
    const response = await axios.get('https://dummyjson.com/products/search', {
      params: { q: terme },
      signal: controllerRecherche.signal
    });
    afficherResultats(response.data.products);
  } catch (error) {
    if (error.name !== 'CanceledError') {
      console.error('Erreur de recherche :', error.message);
    }
  }
}

// Dans un input de recherche
document.getElementById('recherche').addEventListener('input', (e) => {
  rechercherProduits(e.target.value);
});

Timeout avec annulation automatique

// Annulation automatique après N millisecondes
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s

try {
  const response = await axios.get('https://api.exemple.com/data', {
    signal: controller.signal
  });
  clearTimeout(timeoutId); // Annuler le timeout si succès
  return response.data;
} catch (error) {
  if (error.name === 'CanceledError') {
    console.error('La requête a expiré après 5 secondes');
  }
  throw error;
}