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

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

sssccc

Answer 2

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

sssccc