Jusqu'ici, envoyer une donnée au serveur remplaçait la page

const bouton = document.getElementById("charger");

bouton.addEventListener("click", async function () {
    const reponse = await fetch("/api/meteo?ville=Nantes");
    const donnees = await reponse.json();
    document.getElementById("temp").textContent = donnees.temperature;
});

1. La page n'est pas remplacée. Une requête part, la réponse arrive, et seul le paragraphe temp change. Tout le reste — les champs déjà remplis, la position dans la page, l'état des menus — est conservé, et l'écran ne clignote pas. C'est ce qu'on appelle une requête asynchrone : le programme n'attend pas, il indique quoi faire quand la réponse arrivera.

2. Deux pertes, et ce sont exactement les avantages du GET du cours :

• l'adresse ne change pas. L'état affiché n'est plus dans l'URL : impossible de le mettre en favori ou de l'envoyer à quelqu'un. Deux personnes ayant « la même page » ne voient pas la même chose ;
• le bouton « précédent » ne revient pas en arrière. Il quitte le site, puisque rien n'a été ajouté à l'historique. C'est le reproche fait à quantité d'applications Web.

3. En l'état, rien de visible : la promesse échoue, une erreur s'inscrit dans la console que personne ne lit, et l'utilisateur regarde un paragraphe qui ne change pas. Il faut traiter les deux cas d'échec — le réseau qui ne répond pas, et le serveur qui répond une erreur.

bouton.addEventListener("click", async function () {
    const cible = document.getElementById("temp");
    cible.textContent = "chargement...";
    try {
        const reponse = await fetch("/api/meteo?ville=Nantes");
        if (!reponse.ok) {
            throw new Error("le serveur a repondu " + reponse.status);
        }
        const donnees = await reponse.json();
        cible.textContent = donnees.temperature;
    } catch (erreur) {
        cible.textContent = "meteo indisponible";
    }
});

Le point le plus souvent manqué : reponse.ok est nécessaire. Un 404 ou un 500 sont des réponses reçues, non des échecs réseau : fetch les considère comme des succès et n'entre pas dans le catch. Sans ce test, on tenterait de lire du JSON dans une page d'erreur HTML.