Fetch API JavaScript

Avant la Fetch API, communiquer avec un serveur en JavaScript passait par XMLHttpRequest — une API fonctionnelle mais verbeuse, avec des callbacks imbriqués qui rendaient le code difficile à lire. La Fetch API, disponible nativement dans tous les navigateurs modernes depuis plusieurs années, règle ce problème avec une syntaxe propre basée sur les Promises.

Associée à async/await, elle permet d'écrire des appels réseau aussi lisiblement que du code synchrone, tout en restant non bloquant pour la page.

Requête GET simple

fetch() prend une URL en argument et retourne une Promise. La réponse n'est pas directement le contenu : il faut appeler .json() ou .text() pour extraire les données :

Exemple :   📋 Copier le code

// Requête GET avec async/await
async function chargerUtilisateurs() {
  const reponse = await fetch('https://jsonplaceholder.typicode.com/users');

  // Extraire les données JSON
  const utilisateurs = await reponse.json();
  console.log(utilisateurs);
}

chargerUtilisateurs();

Vérifier si la requête a réussi

Attention : fetch() ne rejette pas sa Promise en cas d'erreur HTTP (404, 500...). Il faut vérifier manuellement la propriété ok de la réponse, qui vaut true uniquement pour les codes 200–299 :

Exemple :   📋 Copier le code

async function chargerDonnees(url) {
  const reponse = await fetch(url);

  // fetch ne rejette pas sur les erreurs HTTP — vérification manuelle
  if (!reponse.ok) {
    throw new Error(`Erreur HTTP : ${reponse.status}`);
  }

  return await reponse.json();
}

// Gestion des erreurs avec try/catch
try {
  const data = await chargerDonnees('https://api.exemple.fr/produits');
  console.log(data);
} catch (erreur) {
  console.error('Requête échouée :', erreur.message);
}

Requête POST — envoyer des données JSON

Pour envoyer des données au serveur, on passe un objet d'options à fetch(). La méthode devient POST, on définit le header Content-Type et on sérialise le corps en JSON :

Exemple :   📋 Copier le code

async function creerArticle(article) {
  const reponse = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(article)
  });

  if (!reponse.ok) {
    throw new Error(`Erreur : ${reponse.status}`);
  }

  const resultat = await reponse.json();
  console.log('Article créé :', resultat);
}

creerArticle({ titre: 'Mon article', contenu: 'Contenu...', auteurId: 1 });

Requêtes PUT et DELETE

Le principe est identique pour toutes les méthodes HTTP. On change simplement la valeur de method :

Exemple :   📋 Copier le code

// Mettre à jour un article (PUT)
async function mettreAJour(id, donnees) {
  const reponse = await fetch(`https://api.exemple.fr/articles/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(donnees)
  });

  return await reponse.json();
}

// Supprimer un article (DELETE)
async function supprimer(id) {
  const reponse = await fetch(`https://api.exemple.fr/articles/${id}`, {
    method: 'DELETE'
  });

  if (reponse.ok) {
    console.log('Article supprimé.');
  }
}

Ajouter des headers personnalisés

Pour les APIs qui nécessitent une authentification, on passe un token dans les headers. L'objet Headers permet de les construire proprement :

Exemple :   📋 Copier le code

async function chargerProfil(token) {
  const entetes = new Headers({
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  });

  const reponse = await fetch('https://api.exemple.fr/profil', {
    method: 'GET',
    headers: entetes
  });

  if (!reponse.ok) throw new Error('Non autorisé');
  return await reponse.json();
}

Envoyer un formulaire avec FormData

Pour soumettre un formulaire HTML (avec ou sans fichier), FormData est plus adapté que JSON. Le navigateur gère automatiquement le bon Content-Type — ne le définissez pas manuellement dans ce cas :

Exemple :   📋 Copier le code

const formulaire = document.getElementById('monFormulaire');

formulaire.addEventListener('submit', async (event) => {
  event.preventDefault();

  // FormData récupère automatiquement tous les champs du formulaire
  const donnees = new FormData(formulaire);

  const reponse = await fetch('/api/contact', {
    method: 'POST',
    body: donnees
    // Ne pas définir Content-Type — le navigateur le fait pour vous
  });

  if (reponse.ok) {
    console.log('Formulaire envoyé.');
  }
});

Annuler une requête avec AbortController

Depuis 2017, il est possible d'annuler une requête en cours — utile pour les recherches en temps réel où l'utilisateur tape vite et les anciennes requêtes deviennent inutiles :

Exemple :   📋 Copier le code

let controleur = new AbortController();

async function rechercher(terme) {
  // Annuler la requête précédente si elle est encore en cours
  controleur.abort();
  controleur = new AbortController();

  try {
    const reponse = await fetch(`/api/recherche?q=${terme}`, {
      signal: controleur.signal
    });
    const resultats = await reponse.json();
    afficherResultats(resultats);
  } catch (erreur) {
    if (erreur.name === 'AbortError') {
      console.log('Requête annulée.');
    }
  }
}

// Lancer une recherche à chaque frappe
document.getElementById('recherche').addEventListener('input', (e) => {
  rechercher(e.target.value);
});

Fetch API vs XMLHttpRequest

En 2026, il n'y a plus de raison d'utiliser XMLHttpRequest pour du nouveau code :

• Fetch : syntaxe claire, basée sur les Promises, compatible async/await, AbortController intégré.
• XMLHttpRequest : API historique, callbacks imbriqués, plus verbeuse — à conserver uniquement pour du code legacy.

Par carabde | Mis à jour le 17 avril 2026