Retour à la leçonMission
Mission : une recherche produit qui affiche de vieux résultats
Diagnostiquer un composable useFetch sans annulation, puis le sécuriser et le combiner à un debounce sur la saisie.
Contexte
Un champ de recherche produit utilise un composable maison simplifié : function useFetch(url) { const donnees = ref(null); watchEffect(async () => { const r = await fetch(toValue(url)); donnees.value = await r.json() }); return { donnees } }, sans AbortController ni onCleanup. En tapant vite "ordinateur", l'utilisateur voit parfois s'afficher les résultats pour "ordi" APRÈS ceux pour "ordinateur", alors que "ordinateur" a été tapé en dernier.