fetch() — Guide JavaScript

01 Qu'est-ce que fetch() ? Définition

fetch() est une fonction JavaScript moderne utilisée pour récupérer des données depuis un serveur. Elle remplace progressivement XMLHttpRequest grâce à sa syntaxe plus claire basée sur les Promises.

01 🖱️ Déclencheur Action utilisateur ou code JS

02 📡 Requête HTTP fetch(url) envoyé au serveur

03 ⚙️ Serveur traite PHP, Node, Python…

04 📦 Réponse JSON, HTML, texte…

05 🖥️ DOM mis à jour Sans rechargement page

✅ Pendant toute la durée de la requête, l'interface reste totalement réactive — fetch() est non-bloquant.

02 Exemple simple JavaScript

javascript

// Récupérer un fichier JSON depuis le serveur
fetch("data.json")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error("Erreur :", err);
  });

Les étapes de ce code :

Le navigateur appelle l'URL avec fetch()
Le serveur renvoie une réponse HTTP
.json() désérialise la réponse en objet JavaScript
Les données sont utilisables dans la page sans rechargement
.catch() intercepte toute erreur réseau

03 fetch avec PHP JavaScript + PHP

fetch peut appeler un script PHP qui retourne du HTML ou du JSON :

javascript

// Appel d'un script PHP — réponse HTML injectée dans le DOM
fetch("api.php")
  .then(r => r.text())
  .then(html => {
    document.getElementById("zone").innerHTML = html;
  });

php — api.php

<?php
// api.php — retourner du JSON
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
  'status'  => 'ok',
  'message' => 'Bonjour depuis PHP',
  'time'    => date('H:i:s'),
]);
?>

ℹ️ La page PHP est exécutée sur le serveur puis sa sortie est injectée côté client — aucun rechargement de page.

04 Async / Await Syntaxe moderne

La syntaxe async/await rend le code asynchrone lisible comme du code synchrone :

javascript — async/await

async function loadData() {
  try {
    const response = await fetch("api.php");

    // Vérifier le statut HTTP avant de lire
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    const data = await response.json();
    console.log(data);

  } catch (err) {
    console.error("Erreur :", err.message);
  }
}

⚠️ fetch() ne rejette pas la Promise sur les erreurs HTTP (404, 500…) — il faut tester response.ok manuellement.

05 Démo interactive Simulation

Simulez un appel fetch() — choisissez une URL prédéfinie ou saisissez la vôtre :

// En attente d'une requête… // Essayez : api/users.json · api/config.json · api/stats.json · api/error

06 Pourquoi les IA utilisent fetch Cas d'usage

Les interfaces générées par IA (chatbots, assistants, outils web) reposent massivement sur fetch() pour communiquer avec leurs backends en temps réel.

🔄

Données dynamiques

Charger du contenu frais sans recharger la page — scores, résultats, notifications.

🔌

API externes

Communiquer avec des services tiers : météo, paiement, traduction, bases de données.

⚡

Streaming IA

Recevoir les tokens d'un LLM au fur et à mesure via fetch() + ReadableStream.

🎛️

Interfaces réactives

Mise à jour partielle du DOM — tableaux de bord, filtres live, recherche instantanée.

javascript — POST vers une API IA

// Envoyer un message à un endpoint IA
const res = await fetch("/api/chat", {
  method:  "POST",
  headers: { "Content-Type": "application/json" },
  body:    JSON.stringify({ prompt: "Explique fetch()" }),
});
const data = await res.json();

07 fetch() vs XMLHttpRequest Comparaison

Critère	fetch()	XMLHttpRequest
Syntaxe	Moderne, concise	Verbeuse, callbacks
Basé sur Promises	✓ Oui	✗ Non (callbacks)
Support async/await	✓ Natif	✗ Wrapper nécessaire
Streaming réponse	✓ ReadableStream	✗ Limité
Erreurs HTTP auto	✗ Vérifier response.ok	✗ Vérifier status
Support navigateurs	✓ 98%+	✓ 100% (très ancien)
Recommandé en 2024	✓ Oui	✗ Déprécié

✅ Conseil : utilisez toujours fetch() dans vos nouveaux projets. XMLHttpRequest reste utile uniquement pour maintenir du code legacy ou supporter IE11.

fetchen JS

fetch
en JS