L’API Fetch
fetch(url) demande au navigateur d’envoyer une requête HTTP. Elle renvoie aussitôt une Promise qui fournit normalement une Response, pas du JSON déjà analysé.
Response avant les données
await fetch(...) fournit le statut, les en-têtes et le flux du corps. response.json() lit le texte, analyse le JSON et renvoie une autre Promise contenant les données JavaScript.
Deux étapes distinctes
Séparez le transport de l’analyse. Une réponse peut avoir un statut utile sans que son corps soit du JSON.
📊 De la requête aux données
| Expression | Résultat | Signification |
|---|---|---|
| fetch(url) | Promise<Response> | requête lancée |
| await fetch(url) | Response | statut, en-têtes et flux du corps |
| response.json() | Promise<any> | lecture et analyse du corps |
| await response.json() | données JavaScript | objet ou valeur analysée |
fetch renvoie une Promise
L’exemple autonome emploie une URL Blob seulement pour montrer le type. C’est une ressource mémoire du navigateur, pas un endpoint HTTP de même origine.
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
const ticket = fetch(url);
console.log(ticket instanceof Promise);
ticket.finally(() => URL.revokeObjectURL(url));
La sortie est true. Dans une application, remplacez l’URL Blob par /data/drink.json.
Attendre Response puis JSON
L’exemple suivant crée la même ressource locale et effectue les deux attentes.
async function loadDrink() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
console.log(data.drink);
} finally {
URL.revokeObjectURL(url);
}
}
loadDrink();
La sortie est lida tea. Un vrai fichier /data/drink.json pourrait contenir {"drink":"lida tea"} ; la lecture serait identique.
Vérifier explicitement les erreurs HTTP
fetch tient généralement sa Promise même pour un statut 404 ou 500. Une panne réseau peut la rejeter, mais pas le statut seul. Vérifiez response.ok ou response.status.
const response = new Response("Not found", {
status: 404,
statusText: "Not Found"
});
console.log(response.ok);
console.log(response.status);
La réponse créée affiche false puis 404, les propriétés à examiner après un vrai fetch. N’analysez une page d’erreur en JSON que si l’API le garantit.
json renvoie aussi une Promise
json() lit et analyse le corps de façon asynchrone.
const response = new Response('{"drink":"lida tea"}', {
headers: { "Content-Type": "application/json" }
});
const dataPromise = response.json();
console.log(dataPromise instanceof Promise);
dataPromise.then(data => console.log(data.drink));
La sortie est true. Après await response.json(), data est l’objet JavaScript et data.drink la chaîne.
Démo sans endpoint
La page charge une URL Blob et fonctionne seule. Elle montre le flux et le statut 200, sans prétendre contacter un serveur.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
async function load() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
document.getElementById("cup").textContent = data.drink;
document.getElementById("line").textContent =
response.status + " / " + data.drink;
} finally {
URL.revokeObjectURL(url);
}
}
load();
</script>
</body>
</html>
La page affiche 200 / lida tea. En production, utilisez une URL HTTP et conservez le test de ok avant l’analyse.
À vous
Créez /data/drink.json sur un serveur local et remplacez l’URL Blob. Demandez ensuite un chemin absent et comparez ok et status.
Erreurs fréquentes
Ne confondez pas la Promise de fetch avec les données. Appelez et attendez json(). Ne comptez pas sur catch pour chaque 404.
À retenir
fetch envoie une requête et fournit une Promise de Response. Vérifiez ok, puis analysez le corps attendu. response.json() renvoie une Promise de données.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut