Nuxt 3中的嵌套useFetch
Nuxt 3中的嵌套useFetch
提问于 2022-05-28 21:49:50
如何在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()中，但是对于这个新的复合API设置，我有点不知所措。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-06 09:54:06
当页面可用时，您可以看到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>Stack Overflow用户
发布于 2022-11-23 22:31:57
您可以将第二个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选项，并手动对第二个useFetch进行execute。但是要获得更新，则传递一个返回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选项可以看到这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72419491
复制相关文章
相似问题
腾讯云开发者
