🎁 Semaine 4 - Jour 2 : Promises & Fetch API

🚀 Les Promises : gérer l'asynchronisme avec élégance

Les Promises (promesses) sont la solution moderne pour gérer les opérations asynchrones en JavaScript. Elles remplacent les "callback hell" (l'enfer des callbacks imbriqués) par un code plus lisible et maintenable.

L'API Fetch utilise les Promises pour récupérer des données depuis des serveurs. C'est LA méthode moderne pour faire des requêtes HTTP en JavaScript.

Dans ce cours : Concept de Promise, états (pending/fulfilled/rejected), .then(), .catch(), .finally(), l'API fetch(), et exemples avec JSONPlaceholder (une API de test gratuite).

1. Qu'est-ce qu'une Promise ?

Une Promise est un objet qui représente la complétion (ou l'échec) éventuelle d'une opération asynchrone.

3 états possibles :

  • pending : en attente (opération en cours)
  • fulfilled : résolue avec succès
  • rejected : échouée (erreur)
// Créer une Promise
const maPromise = new Promise((resolve, reject) => {
  const succes = true;
  
  if (succes) {
    resolve('✅ Succès !');
  } else {
    reject('❌ Erreur !');
  }
});

2. .then() et .catch()

.then() est appelé quand la Promise est résolue (fulfilled).
.catch() est appelé quand la Promise est rejetée (rejected).

maPromise
  .then(resultat => {
    console.log(resultat);
  })
  .catch(erreur => {
    console.error(erreur);
  });

.finally() est toujours exécuté, qu'il y ait succès ou échec :

maPromise
  .then(res => console.log(res))
  .catch(err => console.error(err))
  .finally(() => {
    console.log('Opération terminée');
  });

3. L'API Fetch

fetch() permet de faire des requêtes HTTP. Elle retourne une Promise qui se résout avec la réponse.

// Récupérer des données
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Erreur :', error);
  });

💡 Important : fetch() retourne d'abord la réponse HTTP, puis on doit appeler .json() pour obtenir les données JSON.

4. JSON : parse() et stringify()

JSON (JavaScript Object Notation) est le format standard pour échanger des données avec des APIs.

// Objet JavaScript → Texte JSON
const objet = { nom: 'Alice', age: 25 };
const json = JSON.stringify(objet);
console.log(json);
// {"nom":"Alice","age":25}
// Texte JSON → Objet JavaScript
const texteJSON = '{"nom":"Bob","age":30}';
const objetJS = JSON.parse(texteJSON);
console.log(objetJS.nom); // Bob

🎲 Démonstration 1 : Promise Simple

Cette Promise a 50% de chances de réussir ou d'échouer :

Cliquez pour lancer la Promise...

👥 Démonstration 2 : Fetch API - Récupérer des utilisateurs

Utilise l'API JSONPlaceholder pour récupérer une liste d'utilisateurs fictifs :

Cliquez pour charger les données...

📝 Démonstration 3 : Fetch API - Récupérer un article

Entrez un ID et cliquez pour charger...

🔄 Démonstration 4 : Chaînage de Promises

Cette démo enchaîne plusieurs Promises pour récupérer un article ET ses commentaires :

Cliquez pour voir le chaînage de Promises...
⚡ Console JavaScript Interactive - Testez les Promises !
Prêt à exécuter votre code...

💻 Exemples à tester

// 1. Promise qui se résout après 2 secondes
const delayedPromise = new Promise((resolve) => {
  setTimeout(() => resolve('✅ Résolu après 2s'), 2000);
});

delayedPromise.then(msg => console.log(msg));

// 2. Fetch simple avec JSONPlaceholder
fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(user => {
    console.log('Nom:', user.name);
    console.log('Email:', user.email);
  })
  .catch(err => console.error('Erreur:', err));

// 3. Gestion d'erreur avec .catch()
fetch('https://api-qui-nexiste-pas.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    console.error('❌ Erreur capturée:', error.message);
  });

👆 Testez ces exemples dans la console interactive !

Froggiesplaining :


🎯 Objectifs de ce cours :
✅ Comprendre le concept de Promise et ses 3 états
✅ Utiliser .then(), .catch() et .finally()
✅ Maîtriser fetch() pour récupérer des données d'une API
✅ Manipuler JSON avec parse() et stringify()
✅ Chaîner plusieurs Promises

📖 Points clés à retenir :
• Une Promise a 3 états : pending, fulfilled, rejected
• .then() gère le succès, .catch() gère les erreurs
• fetch() retourne toujours une Promise
• Il faut appeler .json() sur la réponse pour obtenir les données
• JSON.parse() : texte JSON → objet JS
• JSON.stringify() : objet JS → texte JSON
• On peut chaîner les .then() pour des opérations séquentielles

🏋️ Exercices pratiques :
1. Liste d'articles : Utilisez fetch() pour récupérer tous les articles de JSONPlaceholder (/posts) et affichez leurs titres
2. Recherche utilisateur : Créez un champ de recherche qui récupère un utilisateur par son ID (1-10)
3. Gestion d'erreur : Ajoutez une vérification pour afficher un message si l'utilisateur n'existe pas
4. Promise personnalisée : Créez une fonction qui simule une requête API avec une Promise qui se résout après 3 secondes
5. Chaînage avancé : Récupérez un article, puis son auteur, puis tous les articles de cet auteur (3 fetch enchaînés)

💡 Astuce pro :
JSONPlaceholder (https://jsonplaceholder.typicode.com) est une API REST gratuite parfaite pour s'entraîner. Routes principales :
• /posts : 100 articles
• /users : 10 utilisateurs
• /comments : commentaires
• /posts/1 : article ID 1
Testez-les dans votre navigateur ou avec fetch() !

Froggie explain

GitHub - eCrea