useFetch imbriqué dans Nuxt 3

Question

Comment réaliser du scraping imbriqué dans Nuxt 3 ? J'ai deux API. La deuxième API doit être déclenchée en fonction de la valeur renvoyée par la première API.

J'ai essayé l'extrait de code ci-dessous mais il ne fonctionne pas à cause de page.Id 在调用时是 null . Je sais que la première API renvoie des données valides. Je suppose donc que la deuxième API est déclenchée avant que la première API ne renvoie le résultat.

<script setup>
  const route = useRoute()
  const { data: page } = await useFetch(`/api/page/${route.params.slug}`)
  const { data: paragraphs } = await useFetch(`/api/page/${page.Id}/paragraphs`)
</script>

Évidemment, il s'agit d'une simple tentative car il n'y a aucune vérification si la première API renvoie réellement des données. Il n'attend même pas de réponse.

Dans Nuxt2, je mettrais le deuxième appel API à l'intérieur .then() mais je suis un peu coincé avec cette nouvelle configuration de l'API de composition.

Answer 1

Une solution est d'éviter d'utiliser await. Utilisez également des références pour contenir des valeurs. Cela rendra votre interface utilisateur et toute autre logique réactive.

sssccc

Answer 2

Vous pouvez regarder 页面，然后在页面可用时运行API调用，您应该将paragraphs作为ref puis attribuer les données déconstruites :

sssccc