Vue : construire une application web (école d'ingénieur) · Chapitre 8 · Exercice de TD

Où charger les données ?

Cycle de vie et composables · niveau 1 (application)

Énoncé

Un collègue charge le catalogue ainsi, dans le script du composant :


const livres = ref([]);
onMounted(async () => {
  livres.value = await (await fetch("/api/livres")).json();
});

Citer trois défauts de cette version par rapport au composable useFetch.

Aucun état de chargement ni d'erreur : la page reste vide pendant le chargement, et une panne ne montre rien (l'erreur est perdue dans la console, et une réponse 500 serait même lue comme des livres).
Aucune annulation : si le composant disparaît avant la réponse, elle est quand même traitée.
Rien n'est réutilisable : la fiche d'un livre, la commande recopieraient le même code, avec les mêmes oublis.

Accessoirement, onMounted n'est pas nécessaire : la requête n'a pas besoin du DOM, elle peut partir dès le setup, un peu plus tôt.

100 % gratuit

La suite du chapitre est sur Adloun

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.