Penggunaan bersarangFetch dalam Nuxt 3

Question

Bagaimana untuk mencapai pengikisan bersarang dalam Nuxt 3? Saya mempunyai dua API. API kedua mesti dicetuskan berdasarkan nilai yang dikembalikan oleh API pertama.

Saya cuba coretan kod di bawah tetapi tidak berkesan kerana page.Id 在调用时是 null . Saya tahu API pertama mengembalikan data yang sah. Jadi saya rasa API kedua dicetuskan sebelum API pertama mengembalikan hasilnya.

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

Jelas sekali ini adalah percubaan mudah kerana tiada semakan sama ada API pertama benar-benar mengembalikan sebarang data. Ia tidak menunggu jawapan.

Dalam Nuxt2 saya akan meletakkan panggilan API kedua di dalam .then() tetapi saya agak tersekat dengan persediaan API Komposisi baharu ini.

Answer 1

Satu penyelesaian ialah elakkan menggunakan await. Juga, gunakan rujukan untuk menyimpan nilai. Ini akan menjadikan UI anda dan logik lain reaktif.

sssccc

Answer 2

Anda boleh menonton 页面，然后在页面可用时运行API调用，您应该将paragraphs作为ref dan kemudian tetapkan data yang dinyahbina:

sssccc