L'API Fetch en JavaScript : guide pratique

L'API Fetch est la manière moderne, basée sur les promesses, de faire des requêtes HTTP depuis le navigateur. Elle remplace l'ancien XMLHttpRequest par une interface plus propre qui fonctionne naturellement avec async/await et les flux. Tous les navigateurs actuels la prennent en charge.

Une première requête GET

fetch() renvoie une promesse qui se résout en un objet Response. Pour en lire le JSON, on appelle response.json(), qui renvoie elle-même une promesse :

const res = await fetch('https://api.example.com/articles');
const data = await res.json();
console.log(data);

La même chose sans async/await, avec des chaînes de .then() :

fetch('https://api.example.com/articles')
  .then((res) => res.json())
  .then((data) => console.log(data));

Le piège : fetch ne rejette pas sur les erreurs HTTP

C'est ce qui surprend presque tout le monde. Une réponse 404 ou 500 reste un fetch réussi — la promesse n'est rejetée que sur une défaillance réseau (hors ligne, DNS, CORS). Vous devez vérifier response.ok vous-même :

const res = await fetch(url);
if (!res.ok) {
  throw new Error(`HTTP ${res.status} ${res.statusText}`);
}
const data = await res.json();

Envoyer des données avec POST

Passez un second argument d'options pour définir la méthode, les en-têtes et le corps. Pour du JSON, sérialisez la charge utile et définissez le Content-Type :

const res = await fetch('/api/articles', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Bonjour', body: 'Monde' }),
});
const created = await res.json();

Annuler une requête

Utilisez un AbortController pour annuler une requête — utile pour les délais d'attente ou quand un composant est démonté :

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000);

try {
  const res = await fetch(url, { signal: controller.signal });
  const data = await res.json();
} catch (err) {
  if (err.name === 'AbortError') console.log('Requête expirée');
} finally {
  clearTimeout(timeout);
}

Aide-mémoire

Tâche	Comment
Lire du JSON	await res.json()
Lire du texte	await res.text()
Vérifier le succès	res.ok / res.status
Envoyer du JSON	body: JSON.stringify(...) + Content-Type
Annuler	AbortController + signal

Cela couvre les cas du quotidien. L'API Fetch prend aussi en charge le streaming des corps de réponse, les envois FormData et le clonage requête/réponse — mais les patterns ci-dessus gèrent la grande majorité des appels réels.