Nuxt 3 中怎么正确使用 useAsyncData 获取 API 数据？

程序员玉霞提问于 2026-03-10 15:52:22 阅读 3

框架

我在 Nuxt 3 项目里用 useAsyncData 调接口，但页面一直显示 pending 状态，数据也拿不到，是不是写法有问题？

我试过这样写：

const { data, pending } = useAsyncData('posts', () => {
  return $fetch('/api/posts')
})

控制台没报错，但 data.value 始终是 null，pending.value 一直是 true。本地开发环境，API 路由是用 Nuxt 的 server/api 写的，直接访问 /api/posts 是能返回 JSON 的。

我来解答赞 2 收藏

反馈

1 条解答

钰岩酱~ Lv1

问题很可能是请求报错了但没处理。Nuxt 3 的 useAsyncData 默认会等待请求完成，如果接口报错了就会一直 pending 着。

试试加个错误处理：

const { data, pending, error } = await useAsyncData('posts', () => 

  $fetch('/api/posts')

)



if (error.value) {

  console.error(error.value)

}

注意这里加了 await，因为 useAsyncData 返回的是 Ref，需要 await 才能拿到值。

如果还是不行，打开浏览器 Network 面板看看请求到底有没有发出去、返回了什么。

2026-03-10 17:06