La recherche au fur et à mesure de la frappe connaît un échec classique : l'utilisateur a tapé cinq lettres, cinq requêtes ont été lancées, la deuxième réponse arrive en dernier et ses anciens résultats écrasent la cinquième correcte. Chaque correctif se termine par le même outil : AbortController.

let inFlight;

async function search(q) {
  inFlight?.abort();               // cancel the previous query
  inFlight = new AbortController();
  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`, {
      signal: inFlight.signal,
    });
    render(await res.json());
  } catch (err) {
    if (err.name !== "AbortError") throw err; // aborts are expected
  }
}

// cleanup when the component or page closes
addEventListener("pagehide", () => inFlight?.abort());

Les quatre habitudes de cet extrait

  • Un contrôleur en vol : son annulation désenregistre également son signal, de sorte que l'ancienne requête cesse de consommer de la bande passante et du processeur.
  • AbortError est un état normal, pas un crash : avalez-le, car la requête annulée a fait son travail en étant annulée.
  • L'anti-rebond est toujours utile : l'abandon arrête le bug de résultat obsolète, l'anti-rebond arrête les requêtes qui étaient des octets inutiles dès la naissance.
  • Annulez également lors du démontage : la navigation et le démontage des composants laissent les récupérations en vie sinon.

Où d'autre il gagne ses octets

  1. Contenu par onglets où chaque onglet est récupéré : changer à mi-chargement sans abandonner est la même course.
  2. Flux de téléchargement multi-fichiers dans lesquels l'utilisateur devrait pouvoir annuler un fichier, pas l'ensemble du lot.
  3. Des boucles d'interrogation qui redémarrent : un nouvel intervalle doit retirer la requête précédente ou deux réponses arrivent et se battent.

La page de recherche de ce site n'a intentionnellement pas besoin de réseau : l'index est livré dans la page, donc la course ne peut pas avoir lieu du tout, ce qui est la solution la plus intéressante de toutes si votre ensemble de données correspond. Dans le cas contraire, l'abandon l'emporte sur tout le reste et le code comporte quinze lignes.