Axios est une bibliothèque JavaScript populaire pour effectuer des requêtes HTTP côté client. Elle est basée sur les Promises et offre une API simple pour interagir avec des API REST.

Installation et configuration

Axios peut être intégré à un projet de plusieurs manières.

// Via npm
npm install axios

// Via yarn
yarn add axios

// Via CDN dans un fichier HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Configuration de base de l'instance

Pour éviter de répéter des paramètres, il est recommandé de créer une instance avec des configurations par défaut.

import axios from 'axios';

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

// Exemple d'utilisation de l'instance
apiClient.get('/utilisateurs')
  .then(response => console.log(response.data))
  .catch(erreur => console.error('Échec de la récupération:', erreur));

Méthodes pour les requêtes

Requête GET avec paramètres

// Avec l'instance configurée
apiClient.get('/articles', {
  params: {
    categorie: 'technologie',
    page: 2,
    limite: 10
  }
}).then(res => {
  const listeArticles = res.data;
  console.log('Articles récupérés:', listeArticles.length);
});

// Méthode alternative avec la configuration complète
axios({
  method: 'GET',
  url: 'https://api.example.com/articles',
  params: { categorie: 'développement' },
  headers: { 'Authorization': 'Bearer jeton123' }
}).then(réponse => {
  console.log(réponse.data);
});

Requête POST avec corps de requête

// Envoi de données au format JSON
const nouveauUtilisateur = {
  nom: 'Jean Dupont',
  email: 'jean@example.com',
  rôle: 'éditeur'
};

apiClient.post('/utilisateurs', nouveauUtilisateur)
  .then(réponse => {
    console.log('Utilisateur créé avec ID:', réponse.data.id);
  })
  .catch(erreur => {
    console.error('Erreur lors de la création:', erreur.response.status);
  });

Données de formulaire (URL-encoded)

Lorsque le backend attend des données au format application/x-www-form-urlencoded, une sérialisation est nécessaire.

import qs from 'qs';

const identifiants = {
  nomUtilisateur: 'jean_d',
  motDePasse: 'secret123'
};

// Sérialisation avec la bibliothèque qs
const corpsRequete = qs.stringify(identifiants);

axios.post('/authentification', corpsRequete, {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(réponse => {
  console.log('Jeton reçu:', réponse.data.token);
});

Intercepteurs pour la personnalisation

Les intercepteurs permettent de modifier les requêtes ou les réponses globalement.

// Intercepteur de requête
apiClient.interceptors.request.use(config => {
  const jeton = localStorage.getItem('jeton');
  if (jeton) {
    config.headers.Authorization = `Bearer ${jeton}`;
  }
  return config;
}, erreur => {
  return Promise.reject(erreur);
});

// Intercepteur de réponse
apiClient.interceptors.response.use(
  réponse => réponse,
  erreur => {
    if (erreur.response && erreur.response.status === 401) {
      window.location.href = '/connexion';
    }
    return Promise.reject(erreur);
  }
);

Gestion des erreurs

apiClient.get('/données')
  .then(réponse => {
    // Traitement des données
  })
  .catch(erreur => {
    if (erreur.response) {
      // Le serveur a répondu avec un statut d'erreur
      console.log('Statut:', erreur.response.status);
      console.log('Données:', erreur.response.data);
    } else if (erreur.request) {
      // La requête a été faite mais pas de réponse
      console.log('Aucune réponse reçue');
    } else {
      // Erreur dans la configuration de la requête
      console.log('Erreur:', erreur.message);
    }
  });

Résolution des problèmes de CORS

Pour les applications de développement, un proxy peut être configuré dans les outils de build.

// Configuration pour Vue CLI (vue.config.js)
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

// Configuration pour webpack (webpack.config.js)
module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
}

Annulation de requêtes

Axios permet d'annuler des requêtes en cours d'exécution à l'aide de CancelToken.

const source = axios.CancelToken.source();

apiClient.get('/données-longues', {
  cancelToken: source.token
}).catch(annulation => {
  if (axios.isCancel(annulation)) {
    console.log('Requête annulée:', annulation.message);
  }
});

// Annulation après un délai
setTimeout(() => {
  source.cancel('Temps d\'attente dépassé');
}, 5000);

Pour les téléchargements de fichiers, Axios offre des callbacks de progression.

apiClient.get('/fichier-gros', {
  responseType: 'blob',
  onDownloadProgress: (evt) => {
    const pourcentage = Math.round((evt.loaded * 100) / evt.total);
    console.log(`Progression: ${pourcentage}%`);
  }
}).then(réponse => {
  const url = URL.createObjectURL(réponse.data);
  // Déclencher le téléchargement
});