Étape 9 — Configurer Axios et les variables d'environnement

Objectifs

• Comprendre les limites de fetch() brut (pas de base URL, boilerplate, pas d'intercepteurs)
• Installer et configurer Axios avec axios.create()
• Utiliser les variables d'environnement (.env) pour externaliser l'URL de l'API
• Sécuriser le projet avec .env.example et .gitignore

Prérequis — Point de départ

Cette étape nécessite d'avoir terminé les étapes 1 à 8 (séquences 1-2). Si votre code n'est pas à jour, vous pouvez repartir de la branche etape-9-start :

# Ajouter le dépôt du prof (une seule fois)
git remote add prof https://github.com/fallinov/esig-141-pokedex-vuetify.git
# Récupérer les branches et basculer
git fetch prof
git checkout -b etape-9-start prof/etape-9-start
npm install

Voir la branche sur GitHub

Contexte

Jusqu'ici, chaque appel API utilise fetch() avec l'URL complète en dur :

const response = await fetch('http://localhost:3535/pokemons')

Cela pose plusieurs problèmes :

Problème	Explication
URL en dur	Si l'URL change, il faut modifier chaque fichier
Pas de base URL	On répète http://localhost:3535 partout
Pas d'intercepteurs	Impossible d'ajouter automatiquement un token d'authentification
Boilerplate	Il faut écrire response.json() à chaque fois
Pas de gestion d'erreur centralisée	Chaque appel doit gérer ses propres erreurs

Axios résout tous ces problèmes avec un client HTTP configuré une seule fois.

Encart oral — Pourquoi un client HTTP dédié ?

fetch() est natif et fonctionne bien pour des cas simples. Mais dans un vrai projet, on a besoin de configurer des headers par défaut, une base URL, des intercepteurs (pour l'auth, les erreurs, etc.). Axios fait tout cela en une seule configuration.

Architecture visée

Tâches

1. Installer Axios

Dans le terminal du projet Pokédex :

npm install axios

2. Créer le fichier .env

Créez un fichier .env à la racine du projet (au même niveau que package.json) :

VITE_API_URL=http://localhost:3535

Préfixe VITE_ obligatoire

Avec Vite, seules les variables préfixées par VITE_ sont accessibles dans le code côté client via import.meta.env. Une variable sans ce préfixe (ex: API_URL) sera invisible dans l'application.

3. Créer le fichier .env.example

Créez .env.example à la racine (même emplacement que .env) :

VITE_API_URL=http://localhost:3535

Encart oral — .env vs .env.example

• .env contient les vraies valeurs de configuration. Il ne doit jamais être commité (il peut contenir des secrets : clés API, mots de passe).
• .env.example est un modèle commité dans le dépôt. Il montre aux autres développeurs quelles variables créer, sans révéler les vraies valeurs.

Quand un collègue clone le projet, il copie .env.example vers .env et remplit ses propres valeurs.

4. Vérifier le .gitignore

Ouvrez .gitignore et vérifiez que .env est bien ignoré. Vous devriez trouver ces lignes :

.env
.env.local
.env.*.local

Si ces lignes n'y sont pas, ajoutez-les.

5. Créer le plugin Axios

Créez le fichier src/plugins/axios.js :

import axios from 'axios'

// import.meta.env.VITE_API_URL → lit la variable VITE_API_URL depuis le fichier .env
// || 'http://localhost:3535' → valeur par défaut si la variable n'existe pas
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3535'

// axios.create() crée une instance Axios avec une configuration réutilisable
// baseURL → toutes les requêtes partiront de cette URL
//           (ex : api.get('/pokemons') → http://localhost:3535/pokemons)
// headers → en-têtes HTTP envoyés automatiquement avec chaque requête
const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
    'Accept-Language': 'fr',
  },
})

// On exporte l'instance pour l'utiliser partout : import api from '@/plugins/axios'
export default api

Grâce à cette configuration :

• Toutes les requêtes partent automatiquement de http://localhost:3535
• On écrit api.get('/pokemons') au lieu de fetch('http://localhost:3535/pokemons')
• Les headers sont envoyés automatiquement

axios.create() vs axios.defaults

Il existe deux façons de configurer Axios :

• axios.create() (utilisé ici) — crée une instance isolée avec sa propre configuration. Permet d'avoir plusieurs instances dans un projet (ex : une pour votre API, une autre pour un service tiers). C'est la pratique recommandée.
• axios.defaults — modifie la configuration globale d'Axios. Plus simple mais moins flexible : tous les import axios du projet partagent la même config.

Dans les deux cas, l'utilisation est identique : api.get('/pokemons') retourne response.data.

6. Vérifier dans la console

Redémarrez le serveur de développement (Ctrl+C puis npm run dev) pour que Vite relise le fichier .env.

Ouvrez la console du navigateur et vérifiez que l'application fonctionne toujours.

Redémarrage obligatoire

Les fichiers .env sont lus au démarrage du serveur Vite. Si vous modifiez .env, vous devez relancer npm run dev pour que les changements soient pris en compte.

Documentation Axios

Pour une référence complète sur Axios (concepts, gestion d'erreurs, CORS), consultez la page Axios — Client HTTP.

Comparaison fetch vs Axios

	fetch()	Axios
Base URL	Non (URL complète à chaque appel)	Oui (baseURL configuré une fois)
Parsing JSON	Manuel (response.json())	Automatique (response.data)
Headers par défaut	Non	Oui (defaults.headers)
Intercepteurs	Non	Oui (requête et réponse)
Gestion d'erreur	Uniquement erreurs réseau	Erreurs réseau + codes HTTP 4xx/5xx

Tests

• npm install axios s'est bien exécuté (vérifier package.json)
• Le fichier .env existe à la racine avec VITE_API_URL=http://localhost:3535
• Le fichier .env.example existe à la racine
• .env est bien dans .gitignore
• src/plugins/axios.js exporte une instance Axios configurée
• L'application démarre sans erreur après redémarrage

Solution

src/plugins/axios.js

import axios from 'axios'

const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3535'

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
    'Accept-Language': 'fr',
  },
})

export default api

.env

VITE_API_URL=http://localhost:3535

.env.example

VITE_API_URL=http://localhost:3535

Commit

git add -A
git commit -m "feat: configuration Axios et variables d'environnement"