Nuxt 3 中的嵌套 useFetch

Question

如何在 Nuxt 3 中完成嵌套抓取？我有两个 API。第二个 API 必须根据第一个 API 返回的值来触发。

我尝试了下面的代码片段，但它不起作用，因为page.Id在null调用它时。我知道第一个 API 返回有效数据。所以我猜想在第一个 API 返回结果之前会触发第二个 API。

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

显然这是一个简单的尝试，因为没有检查第一个 API 是否实际返回任何数据。它甚至没有等待响应。

在 Nuxt2 中，我会在里面放置第二个 API 调用.then()，但对于这个新的 Composition API 设置，我有点无能为力。

Answer 1

您可以观看page然后在页面可用时运行 API 调用，您应该paragraphs将ref破坏的数据分配给它：

<script setup>
const paragraphs = ref()

const route = useRoute()

const { data: page } = await useFetch(`/api/page/${route.params.slug}`)


watch(page, (newPage)=>{
    if (newPage.Id) {

      useFetch(`/api/page/${newPage.Id}/paragraphs`).then((response)=>{
         paragraphs.value  = response.data

     })
        
    }
}, {
    deep: true,
    immediate:true
})
</script>