16/02/2026
Salut Les gars, Vous vous êtes déjà demandé comment d'autres sites ou application Web communiquer avec le serveur sans recharger ?
C'est grâce à JavaScript avec Fetch suivons l'explication plus bas
👇🏾👇🏾👇🏾
1️⃣ C’est quoi Fetch ?
Fetch est une API JavaScript intégrée aux navigateurs qui permet d’envoyer des requêtes HTTP (GET, POST, PUT, DELETE…) vers un serveur et de récupérer des données (souvent en JSON).
👉 En clair :
Fetch = le moyen moderne pour que ton JavaScript parle à une API backend (PHP, Node, Laravel, etc.)
2️⃣ Pourquoi on utilise Fetch ?
Avant, on utilisait surtout XMLHttpRequest (lourd et compliqué).
Fetch est :
✅ Plus simple à lire
✅ Basé sur les promises
✅ Parfait pour les API REST
✅ Natif (pas besoin de librairie)
3️⃣ Comment ça fonctionne ?
Le schéma est simple :
Navigateur (JS) → Fetch → API Backend → Réponse (JSON)
Exemple :
Le front demande : “Donne-moi la liste des produits”
Le serveur répond : “Voilà les produits en JSON”
Le JS affiche les données à l’écran
4️⃣ Exemple simple (GET)
fetch("https://monapi.com/produits")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error("Erreur :", error);
});
🔎 Explication :
fetch() envoie la requête
response.json() transforme la réponse en objet JS
data contient les données du serveur
5️⃣ Exemple avec envoi de données (POST)
fetch("https://monapi.com/produits", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
nom: "Chaussures",
prix: 50
})
})then(res => res.json())then(data => console.log(data));
👉 Ici, le front envoie des données au serveur.
6️⃣ Fetch et API REST
Fetch est souvent utilisé avec une API REST :
GET : lire des données
POST: créer
PUT / PATCH : modifier
DELETE : supprimer
7️⃣ En résumé
Fetch est une API JavaScript côté front
Elle sert à communiquer avec un serveur
Elle fonctionne avec des promises
Elle est idéale pour les applications modernes (SPA, dashboards, e-commerce…)