1. Les quatre états d’une requête asynchrone

Une expérience utilisateur de premier ordre exige d’accompagner visuellement l’internaute à chaque étape du cycle de vie des données distantes :

  • État initial (Idle) : formulaire vierge prêt à la saisie.
  • État de chargement (Loading) : désactivation du bouton d’action et affichage d’un spinner rotatif ou d’un skeleton loader.
  • État de succès (Success) : injection fluide des données reçues et message de félicitations.
  • État d’erreur (Error) : message explicatif bienveillant avec suggestion d’action corrective.

2. Implémentation d’un cycle de chargement complet

async function executerRecherche(terme) {
    const conteneurResultats = document.querySelector("#resultats");
    const spinner = document.querySelector("#indicateur-chargement");

    // 1. Activation du chargement
    spinner.classList.remove("hidden");
    conteneurResultats.innerHTML = "";

    try {
        const donnees = await recupererResultatsAPI(terme);
        // 2. Restitution du succès
        rendreResultatsHTML(donnees, conteneurResultats);
    } catch (erreur) {
        // 3. Gestion de l'erreur
        conteneurResultats.innerHTML = `
            <div class="p-4 bg-red-50 border-l-4 border-red-500 text-red-700" role="alert">
                <p class="font-bold">Échec de communication</p>
                <p>${erreur.message}</p>
            </div>
        `;
    } finally {
        // 4. Désactivation garantie de l'indicateur
        spinner.classList.add("hidden");
    }
}

Synthèse pédagogique : L’excellence d’une application web se mesure à la grâce avec laquelle elle informe ses utilisateurs lorsqu’une défaillance réseau survient.

PreviousNext