📘 Chapitre 1 – Appels AJAX avec `fetch()` & traitement JSON

1. 🎯 Objectif pédagogique

Découvrir comment récupérer des données depuis une API en utilisant la fonction fetch(), comprendre le format JSON et afficher ces données dans la console.

2. 📚 Concepts abordés

Qu’est-ce qu’une API et une requête AJAX
La méthode fetch() pour interroger une API
Le format JSON (JavaScript Object Notation)
Utiliser then() et catch() pour gérer les promesses
Conversion des données avec response.json()

3. 🧠 Explication théorique

Une API (Application Programming Interface) permet d’échanger des données avec un serveur. En JavaScript, fetch() est utilisé pour effectuer des requêtes HTTP et obtenir une réponse, souvent au format JSON.

Exemple simple :

fetch('https://api.example.com/data')
  .then(response => response.json()) // Convertit en JSON
  .then(data => console.log(data))   // Affiche les données
  .catch(error => console.error('Erreur :', error));

Le format JSON ressemble à un objet JavaScript :

{
  "nom": "Ali",
  "age": 25
}

4. 🛠 Tutoriel pratique

Résumé

Nous allons récupérer des données depuis une API publique et les afficher dans la console du navigateur.

Arborescence du projet

mon_projet/
├── index.html
└── script.js

Étape 1 : Créer le fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Appel API avec fetch</title>
</head>
<body>
  <h1>Test de l’API</h1>
  <script src="script.js"></script>
</body>
</html>

Étape 2 : Ajouter le code JavaScript

// script.js
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => {
    console.log("Données reçues :", data);
  })
  .catch(error => {
    console.error("Erreur lors de la récupération :", error);
  });

Étape 3 : Tester

Ouvre index.html dans un navigateur.
Ouvre la console (F12) pour voir les données reçues.

5. 🧾 Résumé et points-clés

fetch() envoie une requête HTTP et retourne une promesse.
response.json() convertit la réponse en un objet JavaScript.
then() gère le succès, catch() capture les erreurs.

📘 Chapitre 1 – Appels AJAX avec fetch() & traitement JSON