Verschachtelter useFetch in Nuxt 3

Question

Wie führt man verschachteltes Scraping in Nuxt 3 durch? Ich habe zwei APIs. Die zweite API muss basierend auf dem von der ersten API zurückgegebenen Wert ausgelöst werden.

Ich habe das Code-Snippet unten ausprobiert, aber es funktioniert wegen page.Id 在调用时是 null nicht. Ich weiß, dass die erste API gültige Daten zurückgibt. Ich vermute also, dass die zweite API ausgelöst wird, bevor die erste API das Ergebnis zurückgibt.

<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>

Natürlich handelt es sich hierbei um einen einfachen Versuch, da nicht überprüft wird, ob die erste API tatsächlich Daten zurückgibt. Es wartet nicht einmal auf eine Antwort.

In Nuxt2 würde ich den zweiten API-Aufruf einbauen .then(), aber ich stecke bei diesem neuen Composition-API-Setup etwas fest.

Answer 1

一种解决方案是避免使用await。另外，使用引用来保存值。这将使您的 UI 和其他逻辑具有反应性。

Answer 2

您可以观看页面，然后在页面可用时运行API调用，您应该将paragraphs作为ref，然后分配解构的数据：