Nuxt 3 中的嵌套 useFetch
P粉590929392
P粉590929392 2024-03-25 18:44:17
0
2
612

如何在 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 设置,我有点无能为力。

P粉590929392
P粉590929392

全部回复(2)
P粉505917590

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

sssccc
P粉561323975

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

sssccc

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板