Nuxt 3 中的嵌套 useFetch答案

【问题标题】：Nested useFetch in Nuxt 3Nuxt 3 中的嵌套 useFetch
【发布时间】：2022-11-24 06:37:03
【问题描述】：

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

我尝试了下面的代码 sn-p，但它不起作用，因为 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 中，我会在 .then() 中放置第二个 API 调用，但是对于这个新的 Composition API 设置，我有点无能为力。

【问题讨论】：

你能告诉我们服务器端代码吗？
@Ifaruki 服务器端代码不是这里的问题。 API返回数据。让我们假设两个 API 调用都成功。
您使用的是什么版本的 Nuxt？ RC1 还是 3？试试另一个。
目前我使用npm:nuxt3@latest，即3.0.0-rc.3-27578655.a802b87

标签： vue.js nuxt.js vuejs3 vue-composition-api nuxtjs3

【解决方案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>

【讨论】：

什么是深刻和直接的属性？
deep表示监听对象或数组的嵌套属性，immediate表示在第一次渲染时触发watcher

【解决方案2】：

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

<script setup>
  const route = useRoute()
  const page = ref()
  const paragraphs = ref()
  useFetch(`/api/page/${route.params.slug}`).then(it=> {
     page.value = it
     useFetch(`/api/page/${page.value.Id}/paragraphs`).then(it2=> {
        paragraphs.value = it2
     }
  }
</script>

【讨论】：

【解决方案3】：

您可以将第二个 useFetch 设置为在第一个具有值之前不立即执行：

<script setup>
  const route = useRoute()
  const { data: page } = await useFetch(`/api/page/${route.params.slug}`)
  const { data: paragraphs } = await useFetch(`/api/page/${page.value?.Id}/paragraphs`, {
    // prevent the request from firing immediately
    immediate: false,
    // watch reactive sources to auto-refresh
    watch: [page]
  })
</script>

您也可以省略 watch 选项并手动 execute 第二个 useFetch。但是为了让它获得更新，传递一个返回 url 的函数：

const { data: page } = await useFetch(`/api/page/${route.params.slug}`)
const { data: paragraphs, execute } = await useFetch(() => `/api/page/${page.value?.Id}/paragraphs`, {
  immediate: false,
})

watch(page, (val) => {
  if (val.Id === 69) {
    execute()
  }
})

您永远不应在挂钩内调用可组合项。

更多useFetch选项可见here。

【讨论】：