1. Installation de la dépendance

npm install axios

2. Configuration globale dans le point d'entrée

Pour une application Vue 3 moderne, nous configurons Axios globalement via les propriétés globales de l'application :

import { createApp } from 'vue';
import axios from 'axios';
import App from './App.vue';

const app = createApp(App);
// Montage global de l'instance axios
app.config.globalProperties.$http = axios;

app.mount('#app');

3. Utilisation basique dans un composant

Exemple d'utilisation avec l'API Composition (<script setup>) pour gérer une authentification :

<script setup>
import { ref, onMounted } from 'vue';
import { authenticateUser } from '@/services/api';

const userCredentials = ref({
  email: 'user@example.com',
  secret: 'securePassword123'
});

onMounted(async () => {
  try {
    const response = await authenticateUser(userCredentials.value);
    console.log('Connexion réussie:', response);
  } catch (error) {
    console.error('Échec de la connexion:', error);
  }
});
</script>

4. Paramètres essentiels d'une instance Axios

• baseURL : L'URL de base qui sera préfixée à toutes les requêtes relatives.
• timeout : Durée maximale d'attente avant l'abandon de la requête (en millisecondes).
• url : Le chemin spécifique de la ressource.
• method : La méthode HTTP utilisée (GET, POST, PUT, etc.).
• headers : En-têtes HTTP personnalisés pour la requête.
• params : Paramètres de requête ajoutés à l'URL (query string).
• data : Corps de la requête, utilisé pour les méthodes POST, PUT, etc.

5. Structuration et encapsulation d'Axios

5.1 Création du client HTTP (services/httpClient.js)

import axios from 'axios';

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

// Intercepteur de requête
apiClient.interceptors.request.use(
  (config) => {
    const authToken = sessionStorage.getItem('auth_token');
    if (authToken) {
      config.headers['Authorization'] = `Bearer ${authToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Intercepteur de réponse
apiClient.interceptors.response.use(
  (response) => response.data,
  (error) => {
    // Gestion centralisée des erreurs
    if (error.response?.status === 401) {
      console.warn('Session expirée');
    }
    return Promise.reject(error);
  }
);

export default apiClient;

5.2 Définition des points de terminaison (services/api.js)

import apiClient from './httpClient';

export const authenticateUser = (payload) => {
  return apiClient.post('/auth/login', payload);
};

export const fetchUserProfile = (userId) => {
  return apiClient.get(`/users/${userId}/profile`);
};

5.3 Intégration dans un composant Vue

<template>
  <section class="auth-container">
    <h2>Authentification</h2>
    <p>Vérification des identifiants en cours...</p>
  </section>
</template>

<script setup>
import { onMounted } from 'vue';
import { authenticateUser } from '@/services/api';

const credentials = {
  email: 'dev@test.com',
  secret: 'mySecretPass'
};

onMounted(async () => {
  try {
    const result = await authenticateUser(credentials);
    console.log('Profil utilisateur:', result);
  } catch (err) {
    console.error('Erreur réseau:', err);
  }
});
</script>

<style scoped>
.auth-container {
  padding: 20px;
}
</style>

6. Gestion des intercepteurs et annulation de requêtes

6.1 Suppression dynamique d'un intercepteur

const interceptorId = apiClient.interceptors.request.use((config) => {
  config.headers['X-Custom-Header'] = 'CustomValue';
  return config;
});

// Retrait de l'intercepteur précédemment ajouté
apiClient.interceptors.request.eject(interceptorId);

6.2 Anunlation d'une requête avec AbortController

L'approche moderne pour annuler des requêtes Axios utilise l'API native AbortController :

import apiClient from './httpClient';

const controller = new AbortController();

const fetchData = async () => {
  try {
    const response = await apiClient.get('/data/stream', {
      signal: controller.signal
    });
    console.log('Données reçues:', response);
  } catch (error) {
    if (error.name === 'CanceledError') {
      console.log('La requête a été annulée volontairement.');
    } else {
      console.error('Erreur:', error);
    }
  }
};

fetchData();

// Annulation de la requête après 3 secondes
setTimeout(() => {
  controller.abort();
}, 3000);

7. Distinction entre Ajax et Axios

Ajax (Asynchronous JavaScript and XML) :

Concept permettant d'effectuer des requêtes réseau asynchrones pour mettre à jour une page web sans la recharger entièrement. Historiquement implémenté via XMLHttpRequest ou des bibliothèques comme jQuery. Cependant, XMLHttpRequest est verbeux et complexe à configurer, et importer jQuery uniquement pour ses fonctions Ajax est aujourd'hui considéré comme une mauvaise pratique.

Axios :

Il ne s'agit pas d'un nouveau protocole, mais d'une bibliothèque cliente HTTP basée sur les Promesses. Elle sert d'enveloppe moderne autour de XMLHttpRequest pour le navigateur et du module http pour Node.js.

Ses avantages majeurs incluent :

• Support natif de l'API Promise (compatible async/await).
• Mécanismes d'interception pour les requêtes et les réponses.
• Transformation automatique des données JSON.
• Protection intégrée contre les attaques CSRF/XSRF.
• Capacité d'annulation des requêtes.
• Fonctionnement isomorphique (navigateur et Node.js).