Étape 18 – Comprendre les requêtes asynchrones avec Axios

🎯 Objectifs

Avant de connecter l’application à une API, vous devez comprendre comment on envoie une requête et comment on récupère une réponse depuis JavaScript.

Dans cette étape, vous apprendrez à :

• comprendre le fonctionnement des requêtes asynchrones,
• manipuler les réponses avec try / catch pour gérer les erreurs,
• utiliser Axios, la bibliothèque que nous allons utiliser dans le projet.

⚙️ Qu’est-ce qu’une requête asynchrone ?

Une requête HTTP (ex : pour aller chercher des Pokémon depuis un serveur) ne répond pas instantanément. Elle prend du temps.
JavaScript ne bloque pas l’exécution du programme pour attendre cette réponse. On utilise pour cela le système asynchrone avec les mots-clés :

• async → indique qu'une fonction est asynchrone
• await → permet d'attendre que la réponse d'une promesse soit disponible

🧪 Exemple simple avec fetch() (JavaScript natif)

async function chargerPokemons () {
    try {
        // On envoie une requête GET à l’API locale
        const response = await fetch('http://localhost:3535/pokemons')
        // On convertit la réponse en objet JavaScript
        const data = await response.json()
        // On affiche le résultat dans la console
        console.log('Pokémns chargés : ', data)
    } catch (error) {
        // En cas d’erreur, on affiche le message d’erreur
        console.error('Erreur lors de la récupération des Pokémon:', error)
    }
}

Ce code attend la réponse (await fetch(...)), la transforme en JSON (await response.json()), puis affiche le résultat.
En cas d’erreur (serveur inaccessible, mauvaise URL, etc.), le catch intercepte le problème.

✅ Pourquoi Axios ?

Nous utiliserons Axios dans notre projet car :

• il simplifie les appels réseau (pas besoin de .json()),
• il permet de gérer facilement les headers (ex : token d’authentification),
• il affiche mieux les erreurs, et est plus lisible pour les développeurs débutants.

Axios est déjà installé dans votre projet. Vous pouvez l’utiliser directement :

import axios from 'axios'

🔁 Exemple complet avec Axios

// Même exemple avec Axios (plus simple)
import axios from 'axios'

async function chargerPokemons () {
    try {
        // Requête GET avec Axios
        const response = await axios.get('http://localhost:3535/pokemons')
        // On affiche le résultat dans la console
        console.log('Pokémns chargés : ', response.data)
    } catch (error) {
        // En cas d’erreur, on affiche le message d’erreur
        console.error('Erreur lors de la récupération des Pokémon:', error)
    }
}

📌 Ce qu’il faut retenir

• Une requête asynchrone retourne une promesse (Promise)
• Pour “attendre” le résultat, on utilise await
• Pour gérer les erreurs, on utilise un bloc try / catch
• Axios est l’outil que nous allons utiliser dans toutes les étapes suivantes

Cette base vous permettra de connecter progressivement votre application à l’API Express locale.