Fetch API

Objectif de la semaine : consommer des APIs avec fetch et async/await.

Méthode recommandée : lisez d'abord la section sur le client et le serveur, puis enchaînez avec fetch et async/await. Gérez d'abord le cas succès, puis ajoutez la gestion d'erreur (try/catch). Avancez par petites étapes et testez chaque changement immédiatement.

Quand vous ouvrez une page web, le navigateur (Chrome, Firefox, etc.) est le client : il affiche le HTML, le CSS et exécute le JavaScript sur l'ordinateur de l'utilisateur. Jusqu'ici, la plupart de vos scripts manipulaient uniquement ce qui est déjà dans la page ou dans le localStorage.

Un serveur est un programme qui tourne sur une autre machine (souvent très loin) et qui répond à des demandes sur le réseau. Il peut stocker des données dans une base, appliquer des règles métier, ou simplement renvoyer des informations au format JSON (texte structuré que JavaScript sait lire comme des objets ou des tableaux).

La fonction fetch est le pont entre votre script (côté client) et une URL sur un serveur : elle envoie une requête HTTP (par exemple GET pour lire des données) et le serveur renvoie une réponse (statut, en-têtes, corps). Vous pouvez ainsi mettre à jour la page sans recharger tout le document, ce qui est au cœur des applications web modernes.

La communication réseau prend du temps : quelques millisecondes ou plusieurs secondes selon la connexion, la charge du serveur, etc. Si le navigateur bloquait tout le script en attendant la réponse, l'onglet ne réagirait plus : pas de clic, pas d'animation, impression que la page est « gelée ».

Pour éviter cela, fetch ne renvoie pas directement les données JSON. Il renvoie tout de suite une Promise (une « promesse » de résultat futur). Votre code continue, et lorsque la réponse arrive, le navigateur exécute la suite : soit avec .then(...), soit avec await dans une fonction async.

Conséquence pour vous : tout ce qui doit utiliser le résultat du réseau (afficher dans le DOM, calculer à partir du JSON, etc.) doit se trouver après la résolution de la Promise — jamais en supposant que les données sont déjà là à la ligne suivante de fetch(...) sans await ni .then.

La Fetch API permet d'envoyer des requêtes HTTP depuis JavaScript : typiquement un GET pour lire des données, ou un POST pour en envoyer. La réponse du serveur arrive sous forme d'objet Response ; on utilise souvent .json() pour obtenir un objet JavaScript utilisable.

1) Lancer une requête GET — fetch retourne une Promise

L'appel suivant démarre la requête vers le serveur. Le résultat immédiat est une Promise, pas la liste d'utilisateurs.

fetch('https://api.exemple.com/utilisateurs');

2) Traiter la réponse HTTP — statut et corps JSON

Quand la Promise se résout, on reçoit un objet response. On vérifie response.ok (codes 200–299). Ensuite, response.json() lit le corps comme JSON et retourne une autre Promise (d'où un second .then ou un second await).

fetch('https://api.exemple.com/utilisateurs')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Erreur HTTP : ${response.status}`);
    }
    return response.json();
  })
  .then(donnees => {
    console.log(donnees);
  })
  .catch(erreur => {
    console.error('Problème :', erreur.message);
  });

3) Utiliser les données dans le DOM

Une fois le tableau donnees disponible, on peut créer des éléments et les ajouter à la page.

// À l'intérieur du .then(donnees => { ... })
donnees.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  document.querySelector('#liste').appendChild(li);
});

4) Exemple de POST — envoyer du JSON au serveur

Un second argument à fetch décrit la méthode HTTP, les en-têtes et le corps (souvent une chaîne JSON).

fetch('https://api.exemple.com/utilisateurs', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ nom: 'Marie', age: 22 }),
})
  .then(r => r.json())
  .then(data => console.log('Créé :', data))
  .catch(err => console.error(err));

async et await sont une autre façon d'écrire la même idée que les .then() : elles rendent le flux plus lisible, surtout quand il y a plusieurs étapes (réseau, puis conversion JSON, puis affichage).

await fetch(...) « met en pause » uniquement la fonction async courante jusqu'à la réponse, pas tout le navigateur. Pendant ce temps, l'utilisateur peut toujours interagir avec la page.

1) Déclarer une fonction async et un try/catch

Le bloc try regroupe le « chemin heureux ». Le catch centralise les erreurs (réseau, HTTP, JSON). La fonction est marquée async pour pouvoir utiliser await à l'intérieur.

async function chargerUtilisateurs() {
  try {
    // le corps du try sera rempli aux étapes 2 et 3
  } catch (erreur) {
    console.error('Erreur :', erreur.message);
    document.querySelector('#liste').textContent = 'Impossible de charger.';
  }
}

2) Attendre la réponse réseau puis le JSON (dans le try)

Deux await successifs : le premier pour l'objet Response, le second pour la conversion en données JavaScript. Ces lignes se placent à l'intérieur du try de l'étape 1, à la place du commentaire.

const response = await fetch('https://api.exemple.com/utilisateurs');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const utilisateurs = await response.json();

3) Mettre à jour le DOM (toujours dans le même try, après le JSON)

Une fois utilisateurs disponible, on vide la liste puis on ajoute un élément par personne.

const liste = document.querySelector('#liste');
liste.innerHTML = '';

utilisateurs.forEach(user => {
  const li = document.createElement('li');
  li.textContent = `${user.name} — ${user.email}`;
  liste.appendChild(li);
});

4) Déclencher le chargement

Les extraits des étapes 2 et 3 se placent à l'intérieur du try de l'étape 1, à la place du commentaire // le corps du try…, pour former une seule fonction complète.

On peut appeler la fonction au chargement ou au clic : dans les deux cas, le travail réseau reste asynchrone.

chargerUtilisateurs();

document.querySelector('#btnCharger')
  .addEventListener('click', chargerUtilisateurs);

5) Fonction qui retourne une donnée chargée

Une fonction async retourne elle-même une Promise. L'appelant peut utiliser .then ou await.

async function getPost(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const post = await res.json();
  return post;
}

getPost(1).then(post => console.log(post.title));

L'exemple suivant combine interface (bouton désactivé pendant le chargement), appel réseau, boucle sur les articles et retour à l'état initial dans finally.

1) En-tête de la fonction : éléments et état « chargement »

On récupère le bouton et la zone d'affichage, puis on indique visuellement qu'une requête est en cours.

async function chargerArticles() {
  const btn = document.getElementById('btnCharger');
  const conteneur = document.getElementById('articles');

  btn.disabled = true;
  btn.textContent = 'Chargement…';
  conteneur.innerHTML = '';

  try {

2) Récupérer les articles (asynchrone, dans le try)

Même principe que pour les utilisateurs : await fetch puis await res.json(). Tant que ces lignes s'exécutent, le bouton reste désactivé mais l'interface ne gèle pas.

    const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
    const articles = await res.json();

3) Construire le DOM pour chaque article

La variable articles est un tableau : on parcourt chaque objet et on ajoute une carte au conteneur.

    articles.forEach(article => {
      const carte = document.createElement('div');
      carte.innerHTML = `
        <h3>${article.title}</h3>
        <p>${article.body}</p>
      `;
      conteneur.appendChild(carte);
    });

4) Erreurs et retour à l'état initial

Le catch affiche une erreur lisible. Le finally s'exécute dans tous les cas pour réactiver le bouton.

  } catch (err) {
    conteneur.textContent = `Erreur : ${err.message}`;
  } finally {
    btn.disabled = false;
    btn.textContent = 'Charger les articles';
  }
}

5) Lancer au chargement de la page

Les blocs 1 à 4 forment une seule fonction chargerArticles : recopiez-les dans l'ordre pour obtenir le script complet.

window.addEventListener('load', chargerArticles);

Reproduisez le plus fidèlement possible la démo Appel à une API publique ci-dessus dans une page HTML séparée.

1. Recréez la structure (bouton, zone de message pour le statut, conteneur pour les cartes).
2. Utilisez fetch en mode asynchrone (async/await ou .then) vers la même URL (ou une autre liste JSON similaire).
3. Pour chaque objet reçu, créez une carte dans le DOM avec le titre et un extrait du corps du texte (comme sur la démo).
4. Affichez « Chargement… » pendant la requête, gérez les erreurs avec try/catch et réactivez le bouton dans finally.

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.