Exercice 9.4 · 8 min · 0 tentative
Récupérer des données
🎯 Objectif
Utiliser fetch() pour récupérer des données depuis une vraie API REST.
📖 Contexte
Qu'est-ce qu'une API ?
Une API (Application Programming Interface) est un service web qui fournit des données au format JSON. On y accède via des URLs.
DummyJSON (dummyjson.com) est une API gratuite avec des données de test : produits, utilisateurs, etc.
Comment utiliser fetch ?
fetch() envoie une requête HTTP et retourne une réponse :
async function chargerDonnees() {
// 1. Envoyer la requête GET
const response = await fetch("https://dummyjson.com/products?limit=3")
// 2. Convertir la réponse en JSON
const data = await response.json()
// 3. Utiliser les données
console.log(data.products)
}
Les deux étapes de fetch
| Étape | Code | Ce qu'on obtient |
|---|---|---|
| 1 | await fetch(url) | Un objet Response (la réponse HTTP) |
| 2 | await response.json() | Les données en JavaScript (objet/tableau) |
Deux await nécessaires ! Le premier attend que le serveur réponde. Le deuxième attend que le JSON soit lu et converti en objet JavaScript.
Le paramètre select
DummyJSON permet de choisir les champs retournés avec ?select= :
// Retourne TOUS les champs (prix, description, images, etc.)
fetch("https://dummyjson.com/products/1")
// Retourne SEULEMENT title et price
fetch("https://dummyjson.com/products/1?select=title,price")
// → { id: 1, title: "Essence Mascara Lash Princess", price: 9.99 }
📝 Consigne
Complète la fonction chargerProduits() :
- Convertis la réponse en JSON :
const data = await response.json()
Résultat attendu :
Produits reçus : 3
- Essence Mascara Lash Princess : 9.99 $
- Eyeshadow Palette with Mirror : 19.99 $
- Powder Canister : 14.99 $
C'est une vraie API ! Les données viennent du serveur DummyJSON, pas d'une simulation. Tu fais un vrai appel réseau.
Objectifs
- Convertir en JSON
- Utiliser fetch
- Affiche le nombre de produits
- Affiche un produit
Lis bien les instructions et lance-toi !