La recherche qui affiche l'ancien résultat — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 10)

La recherche qui affiche l'ancien résultat

Dialoguer avec un serveur : fetch · niveau 3 (difficile)

Énoncé

Un champ de recherche envoie une requête au serveur à chaque saisie (après un anti-rebond de 300 ms). Un utilisateur rapporte : « J'ai tapé java, et la page m'a montré tous les livres. » Le problème ne se produit que sur une connexion lente. Expliquer le scénario, en précisant l'ordre des événements, puis écrire une fonction rechercher(texte) qui l'évite. L'anti-rebond suffit-il à lui seul ?

Corrigé

L'utilisateur tape « j », s'arrête un instant (plus de 300 ms) : la requête « j » part. Il tape « ava » : 300 ms plus tard, la requête « java » part. Sur une connexion lente, les temps de réponse varient ; si « java » répond d'abord, la page affiche son résultat, puis la réponse à « j », arrivée ensuite, l'écrase. Les requêtes HTTP ne se terminent pas forcément dans l'ordre où elles sont parties. L'anti-rebond réduit le nombre de requêtes, mais n'empêche pas deux d'entre elles d'être en vol en même temps. Il faut abandonner la précédente :


let controleur;

async function rechercher(texte) {
  controleur?.abort();
  controleur = new AbortController();
  try {
    const url = new URL("/api/livres", location.origin);
    url.searchParams.set("q", texte);
    const livres = await obtenirJson(url, { signal: controleur.signal });
    afficherCatalogue(liste, livres);
  } catch (e) {
    if (e.name !== "AbortError") {
      afficherErreur(e);
    }
  }
}

Le programme course-annulee.mjs du cours vérifie le scénario : la recherche « a » est abandonnée, « java » est affichée.