Un utilisateur peut modifier des itinéraires ou des filtres alors qu'une demande antérieure est toujours en cours. Si l'ancienne réponse arrive en dernier, elle peut écraser les données de la vue actuelle.

Liez la demande à la vue

const controller = new AbortController();
fetch(url, { signal: controller.signal });

// When this view is replaced:
controller.abort();
  • Créez un contrôleur pour la requête ou la vue propriétaire du résultat.
  • Abandonnez-le lorsque la vue est supprimée ou que le terme de recherche pertinent change.
  • Traitez un abandon comme une annulation attendue, et non comme une erreur de serveur nécessitant une nouvelle tentative.

Protégez également les mises à jour d'état

L'annulation ne peut pas arrêter chaque opération après l'arrivée d'une réponse. Vérifiez que le résultat appartient toujours à la requête active avant de le valider dans l'état partagé.

Testez une première requête lente suivie d'une deuxième requête plus rapide. L'écran final doit refléter la vue actuelle et l'annulation ne doit pas afficher de message d'erreur trompeur.