Fetch API : Requêtes HTTP en JavaScript
GET, POST, PUT, DELETE, headers, gestion d'erreurs, AbortController — tout sur fetch()
C'est quoi fetch ?
fetch() est la fonction native de JavaScript pour envoyer des requêtes HTTP (GET, POST, PUT, DELETE…). Elle remplace XMLHttpRequest et rend les bibliothèques comme jQuery ou Axios souvent inutiles.
const response = await fetch(url, options);
// fetch retourne une Promise qui se résout en un objet Response
// L'objet Response contient les headers, le statut, et le corps
fetch est disponible nativement dans tous les navigateurs modernes et dans Node.js 18+. Pas besoin d'installer quoi que ce soit.
GET — lire des données
async function getUsers()
// GET avec paramètres (query string)
async function searchUsers(query, page = 1)
// URL finale : /users?q=alice&page=1&limit=10
// Lire le corps comme texte (pas JSON)
const html = await fetch(« /page.html »).then(r => r.text());
// Lire comme Blob (fichier binaire, image…)
const blob = await fetch(« /image.png »).then(r => r.blob());
URLSearchParams est la façon propre de construire des query strings. Il gère l'encodage automatiquement (espace → %20, & → %26…).
POST — envoyer des données
const newUser = await createUser();
const form = document.querySelector(« #upload-form »);
form.addEventListener(« submit », async (e) => );
// Upload d'un fichier manuellement
const formData = new FormData();
formData.append(« avatar », fileInput.files[0]);
formData.append(« nom », « Alice »);
await fetch(« /api/upload », );
⚠️ Avec FormData, ne mets pas le header Content-Type manuellement. Le navigateur le définit automatiquement avec le bon boundary multipart. Le définir toi-même casse la requête.
PUT, PATCH, DELETE
await fetch(`/api/users/$`, );
// PATCH — modifier partiellement
await fetch(`/api/users/$`, );
// DELETE — supprimer
await fetch(`/api/users/$`, );
| Méthode | Rôle | Corps |
|---|---|---|
| GET | Lire / récupérer | Non |
| POST | Créer | Oui (JSON, FormData…) |
| PUT | Remplacer entièrement | Oui |
| PATCH | Modifier partiellement | Oui |
| DELETE | Supprimer | Rarement |
Gestion des erreurs
// (pas de connexion, DNS fail, CORS bloqué)
// Les erreurs HTTP (404, 500) sont des réponses « réussies » pour fetch
async function fetchData(url)
C'est le piège n°1 de fetch. Un 404 Not Found ou un 500 Server Error ne déclenche pas le catch. Il faut toujours vérifier response.ok (qui est true pour les statuts 200-299).
| Propriété / Méthode | Retourne |
|---|---|
| response.ok | true si status 200-299 |
| response.status | Code HTTP (200, 404, 500…) |
| response.statusText | « OK », « Not Found »… |
| response.headers | Objet Headers |
| response.json() | Promise → objet JS |
| response.text() | Promise → string |
| response.blob() | Promise → Blob (binaire) |
| response.formData() | Promise → FormData |
Headers et authentification
await fetch(« /api/data », );
// Token Bearer (JWT)
const token = localStorage.getItem(« token »);
await fetch(« /api/protected », );
// Cookies (cross-origin)
await fetch(« https://autre-domaine.com/api », );
Annuler une requête (AbortController)
async function fetchWithTimeout(url, ms = 5000)
// Annuler lors d'un changement de page (SPA / React)
const controller = new AbortController();
fetch(« /api/data », )
.then(r => r.json())
.then(data => updateUI(data));
// Plus tard, si l'utilisateur navigue ailleurs :
controller.abort(); // la requête est annulée
// AbortSignal.timeout() — raccourci (2023+)
await fetch(url, );
Fonction fetch réutilisable
async function api(endpoint, = )
// Utilisation
const users = await api(« /users »);
const newUser = await api(« /users », {
method: « POST »,
body: ,
});
await api(`/users/$`, );
Ce wrapper centralise le Content-Type, le token, le timeout et la vérification response.ok. Adapte-le à ton projet — c'est le pattern utilisé par la plupart des apps front-end.
Erreurs fréquentes
| Erreur | Problème | Solution |
|---|---|---|
| Ne pas vérifier response.ok | Les erreurs 404/500 passent inaperçues | Toujours if (!response.ok) throw |
| Oublier await response.json() | On récupère une Promise, pas les données | Deux await : fetch + json() |
| Content-Type avec FormData | Le boundary multipart est cassé | Ne pas mettre Content-Type avec FormData |
| Pas de try/catch | Erreurs réseau non gérées | Toujours entourer d'un try/catch |
| Requêtes en parallèle non optimisées | Requêtes séquentielles lentes | Promise.all([fetch(…), fetch(…)]) |
| CORS bloqué | Le serveur n'autorise pas le domaine | Configurer le serveur ou utiliser un proxy |
Questions fréquentes
⏳ Promesses & async/await
📄 JSON
🌳 Manipuler le DOM
🎯 addEventListener
🧩 Destructuring
⚡ Cours JavaScript complet
🏠 Hub Programmation
Fetch API en JavaScript — Requêtes HTTP complètes
Référence : MDN Fetch API