JavaScript : rendez vos pages vivantes

Ce que vous saurez faire

Attendre une réponse réseau, vérifier son contenu et restituer un état clair à l’utilisateur. Un chargement réussi n’est qu’un chemin parmi plusieurs.

1. Une promesse n’est pas encore une donnée

Une fonction async renvoie une promesse. await attend son résultat dans cette fonction, sans bloquer toute l’interface. En revanche, un calcul synchrone très long continue à occuper le thread : ajouter async ne le déplace pas magiquement ailleurs.

Placez le traitement des erreurs autour des opérations attendues. Une erreur réseau ou un JSON mal formé peut interrompre le parcours avant le rendu. finally sert à restaurer un état commun, par exemple réactiver un bouton.

Référence : fonctions async.

2. Un exemple complet côté interface

Créez ces éléments dans une page, puis placez le script après eux. /api/lessons désigne ici votre propre endpoint de démonstration, qui doit renvoyer un tableau d’objets avec un titre.

<button id="load" type="button">Charger les cours</button>
<p id="status" role="status"></p>
<ul id="lessons"></ul>

const button = document.querySelector('#load');
const status = document.querySelector('#status');
const list = document.querySelector('#lessons');

button.addEventListener('click', async () => {
  button.disabled = true;
  status.textContent = 'Chargement…';
  list.replaceChildren();
  try {
    const response = await fetch('/api/lessons');
    if (!response.ok) throw new Error('Réponse HTTP invalide');
    const data = await response.json();
    if (!Array.isArray(data) ||
        !data.every(item => typeof item?.title === 'string')) {
      throw new Error('Format inattendu');
    }
    for (const item of data) {
      const li = document.createElement('li');
      li.textContent = item.title;
      list.append(li);
    }
    status.textContent = data.length ? 'Cours chargés.' : 'Aucun cours.';
  } catch {
    status.textContent = 'Chargement impossible. Réessayez.';
  } finally {
    button.disabled = false;
  }
});

fetch ne rejette pas automatiquement sa promesse pour un statut 404 ou 500 : testez response.ok. Valider le JSON évite de supposer que le serveur respecte toujours le contrat. textContent affiche les titres comme texte, sans interpréter du HTML.

Référence : utiliser Fetch.

À vous de jouer

Testez un tableau vide, une réponse 500 et un objet { "error": "indisponible" } avec statut 200. Le bouton doit-il rester bloqué dans un de ces cas ?

Correction commentée

Non : finally le réactive dans les trois cas. Le tableau vide produit « Aucun cours ». Le statut 500 échoue au contrôle HTTP ; l’objet échoue au contrôle de structure. Ces deux derniers parcours affichent une erreur, pas une liste vide trompeuse.