L'intégration d'Axios dans un environnement Vue.js permet de gérer les requêtes HTTP de manière structurée. Pour assurer une maintenance aisée, il est recommandé de créer une instance dédiée plutôt que d'utiliser la configuration globale par défaut.

Installation de la bibliothèque

Pour commencer, installez Axios via le gestionnaire de paquets NPM :

npm install axios --save

Note : L'option --save (ou -S) ajoute la dépendance dans la section dependencies du fichier package.json, garantissant sa présence lors du déploiement en production. L'opsion --save-dev (ou -D) est réservée aux outils de développement comme les compilateurs ou les linters.

Création d'une instance Axios personnalisée

Il est préférable de centraliser la configuration dans un fichier dédié, par exemple src/utils/request.js, afin de gérer les intercepteurs et les paramètres de base.

import axios from 'axios';

// Instanciation de la configuration personnalisée
const apiClient = axios.create({
    baseURL: 'http://api.mon-serveur.local:8888',
    timeout: 20000, // Délai d'attente de 20 secondes
    headers: {
        'Content-Type': 'application/json'
    },
    withCredentials: true // Autorise l'envoi de cookies lors des requêtes cross-domain
});

// Intercepteur de requête : traitement avant l'envoi
apiClient.interceptors.request.use(
    config => {
        // Possibilité d'ajouter un jeton d'authentification ici
        return config;
    },
    err => {
        console.error('Erreur lors de la requête :', err);
        return Promise.reject(err);
    }
);

// Intercepteur de réponse : formatage des données entrantes
apiClient.interceptors.response.use(
    response => {
        // Extraction directe du corps de la réponse
        return response.data;
    },
    err => {
        console.error('Erreur de réponse serveur :', err);
        return Promise.reject(err);
    }
);

export default apiClient;

Définition des services API

Pour une meilleure organisation, séparez les appels API dans des modules spécifiques, par exemple src/api/userService.js.

import request from '@/utils/request';

// Requête de type GET pour récupérer des détails
export function getProfile(userId) {
    return request({
        url: '/v1/user/profile',
        method: 'get',
        params: { id: userId }
    });
}

// Requête de type POST pour soumettre des données
export function updateProfile(payload) {
    return request({
        url: '/v1/user/update',
        method: 'post',
        data: payload
    });
}

Utilisation au sein d'un composant Vue

Dans vos fichiers .vue, importez simplement les fonctions nécessaires pour interagir avec vos services.

<script>
import { getProfile } from '@/api/userService';

export default {
    name: 'UserProfile',
    data() {
        return {
            userData: null
        };
    },
    mounted() {
        this.loadUserData();
    },
    methods: {
        async loadUserData() {
            try {
                const response = await getProfile(101);
                this.userData = response;
                console.log('Données récupérées :', response);
            } catch (error) {
                console.error('Echec du chargement', error);
            }
        }
    }
}
</script>

Alternative : Injection globale dans l'instance Vue

Bien que la méthode par instance soit privilégiée pour sa robustesse, il est possible d'attacher Axios au prototype global de Vue dans main.js pour un accès rapide via this.

import Vue from 'vue';
import axios from 'axios';
import App from './App.vue';

// Injection d'Axios comme propriété globale
Vue.prototype.$http = axios;

new Vue({
    render: h => h(App),
}).$mount('#app');

L'appel dans le composant se fera alors de la manière suivante :

this.$http.post('http://localhost:8080/api/login', {
    username: 'admin',
    password: 'secret_password'
}).then(res => {
    console.log(res.data);
});