Vue Academy · 课时

数据获取：useFetch 与 useAsyncData

Q: 「数据获取：useFetch 与 useAsyncData」这节课中我会学到什么？

useFetch()、useAsyncData()、服务端与客户端获取数据的区别、refresh()，以及等待状态 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

useFetch()、useAsyncData()、服务端与客户端获取数据的区别、refresh()，以及等待状态

数据获取：useFetch 与 useAsyncData 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

在 Nuxt 中获取数据

Nuxt 提供支持 SSR 的数据获取组合式函数。它们会在渲染期间于服务器上运行，并将结果传给客户端，从而避免重复请求和短暂显示空内容。

useFetch 基础

useFetch 封装了 URL 获取请求。它会返回响应式的 data、pending 和 error 值，您可以直接在模板中使用它们。

<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>

显示加载状态和错误

使用 pending 表示加载状态，使用 error 表示失败。data 保存解析后的 JSON。

<template>
  <p v-if="pending">Loading...</p>
  <p v-else-if="error">Failed to load</p>
  <ul v-else>
    <li v-for="p in data" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

使用 useAsyncData 实现自定义逻辑

当您需要的不只是一个普通 URL，例如组合多个请求或转换结果时，请使用 useAsyncData。它需要一个唯一键和一个获取函数。

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

键为何重要

该键用于对请求去重并进行缓存。两个使用同一键的组件会共享一个结果和一次网络请求，从而避免重复获取。

useFetch 是语法糖

在底层，useFetch(url) 本质上是带有自动生成键和 $fetch(url) 获取函数的 useAsyncData。对于简单 URL，请使用 useFetch；对于自定义获取函数，请使用 useAsyncData。

使用 server:false 仅在客户端运行

设置 server: false 可跳过 SSR 期间的获取，仅在客户端运行。这适用于用户专属数据，因为这类数据不应阻塞服务器渲染。

const { data } = await useFetch('/api/me', {
  server: false
})

延迟且不阻塞的获取

默认情况下，await 会阻塞导航，直到数据到达。lazy 选项（或 useLazyFetch）允许 page 立即渲染，并在数据解析后再填充内容。

const { data, pending } = useFetch('/api/posts', {
  lazy: true
})

使用 refresh 重新获取

这些组合式函数会返回一个 refresh 函数，您可以按需重新执行获取操作，例如在变更操作或按钮点击之后。

const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }

响应式查询参数

传入 query 或响应式选项；当被监听的 ref 发生变化时，获取操作会自动重新执行。绑定 watch，即可在依赖项发生变化时重新获取。

const page = ref(1)
const { data } = await useFetch('/api/posts', {
  query: { page },
  watch: [page]
})

转换响应

transform 选项会在响应传递给 data 之前对其进行重新组织，便于只选取所需字段，并缩小发送到客户端的数据负载。

const { data } = await useFetch('/api/user', {
  transform: (u) => ({ name: u.name, id: u.id })
})

快速检查

测试您对 Nuxt 数据获取的掌握情况。

回顾

您已经学习了 Nuxt 数据获取：

useFetch 返回响应式的 data、待处理状态和 error。
useAsyncData 接收一个键和一个获取函数，用于实现自定义逻辑。
server:false 仅在客户端运行；lazy 使获取操作不阻塞。
refresh() 会重新获取数据；watch 会在依赖项变化时重新执行。

常见问题解答

「数据获取：useFetch 与 useAsyncData」课时是免费的吗？

是的 — 「数据获取：useFetch 与 useAsyncData」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「数据获取：useFetch 与 useAsyncData」这节课中我会学到什么？

useFetch()、useAsyncData()、服务端与客户端获取数据的区别、refresh()，以及等待状态你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「数据获取：useFetch 与 useAsyncData」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy