Nuxt 3 中的嵌套 useFetch
P粉590929392
P粉590929392 2024-03-25 18:44:17
[Vue.js讨论组]

如何在 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 和其他逻辑具有反应性。

P粉561323975

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号