Utilisation dans un projet

Avant de connecter une application à une API, il faut 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)
    }
}

🔗 Couplage avec Pinia

Après avoir récupéré des données via une API, on les stocke dans le store Pinia. Cela permet :

• de centraliser les données (ex : la liste des Pokémon),
• d’éviter de refaire la requête à chaque affichage,
• de partager les données entre plusieurs composants.

Le store Pinia gère aussi l’état de chargement et les erreurs.
Ensuite, dans les composants Vue, on utilise le store pour accéder aux données déjà chargées : il suffit d’appeler le store et d’afficher les données stockées.

Exemple : stocker et utiliser les Pokémon

Dans le store Pinia (pokemonStore.js) :

import { defineStore } from 'pinia'
import axios from 'axios'

export const usePokemonStore = defineStore('pokemon', {
  state: () => ({
    pokemons: [],
    loading: false,
    error: null
  }),
  actions: {
    async chargerPokemons () {
      this.loading = true
      this.error = null
      try {
        const response = await axios.get('http://localhost:3535/pokemons')
        this.pokemons = response.data
      } catch (err) {
        this.error = err.message
      } finally {
        this.loading = false
      }
    }
  }
})

Dans un composant Vue :

<script setup>
import { usePokemonStore } from '@/stores/pokemon'
const pokemonStore = usePokemonStore()

onMounted(() => {
  // On charge les Pokémon une seule fois
  pokemonStore.chargerPokemons()
})
</script>

<template>
  <div v-if="pokemonStore.loading">Chargement…</div>
  <div v-else-if="pokemonStore.error">Erreur : {{ pokemonStore.error }}</div>
  <ul v-else>
    <li v-for="p in pokemonStore.pokemons" :key="p.id">{{ p.name }}</li>
  </ul>
</template>

TIP

On charge les données dans le store, puis on les utilise dans les composants. Les données restent accessibles tant que l’application est ouverte, et tous les composants peuvent y accéder sans refaire la requête.

📌 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