使用异步数据 useAsyncData

useAsyncData 提供对异步解析的数据的访问。

useAsyncData

在您的页面、组件和插件中，您可以使用 useAsyncData 来访问异步解析的数据。

useAsyncData 是一个可组合项，旨在在设置函数、插件或路由中间件中直接调用。 它返回反应式可组合项并处理向 Nuxt 有效负载添加响应，以便它们可以从服务器传递到客户端，而无需在页面水合时在客户端重新获取数据。

类型

Signature
ts
function useAsyncData(
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): AsyncData<DataT>
function useAsyncData(
  key: string,
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT>>

interface AsyncDataOptions<DataT> {
  server?: boolean
  lazy?: boolean
  default?: () => DataT | Ref<DataT> | null
  transform?: (input: DataT) => DataT
  pick?: string[]
  watch?: WatchSource[]
  immediate?: boolean
}

interface RefreshOptions {
  dedupe?: boolean
}

interface AsyncData<DataT, ErrorT> {
  data: Ref<DataT | null>
  pending: Ref<boolean>
  execute: () => Promise<void>
  refresh: (opts?: RefreshOptions) => Promise<void>
  error: Ref<ErrorT | null>
}

参数

  • key：一个唯一的键，以确保可以跨请求正确地删除数据提取。 如果您不提供密钥，则会为您生成一个对 useAsyncData 实例的文件名和行号唯一的密钥。
  • handler：一个返回值的异步函数
  • options：
    • lazy: 是否在加载路由后解析异步函数，而不是阻止客户端导航(默认为 false)
    • default：在异步函数解析之前设置数据默认值的工厂函数——对 lazy: true 选项特别有用
    • server: 是否在服务器上获取数据(默认为 true)
    • transform：可用于在解析后更改“处理程序”函数结果的函数
    • pick: 仅从 handler 函数结果中选择该数组中的指定键
    • watch: 观看自动刷新的反应源
    • immediate：当设置为false时，将阻止请求立即触发。 (默认为true)

在底层，lazy: false 使用 <Suspense> 在获取数据之前阻止路由的加载。 考虑使用 lazy: true 并实现加载状态来获得更快速的用户体验。

返回值

  • data：传入的异步函数的结果。
  • pending：一个布尔值，指示是否仍在获取数据。
  • refresh/execute：可用于刷新handler函数返回的数据的函数。
  • error：数据获取失败时的错误对象。
  • status：指示数据请求状态的字符串("idle"、"pending"、"success"、"error")。

默认情况下，Nuxt 会等到refresh完成后才能再次执行。

如果您还没有在服务器上获取数据(例如，使用 server: false)，那么数据 不会 被获取，直到水合完成。 这意味着即使您在客户端等待 useAsyncData，data 仍将在 <script setup> 中保持为 null。

示例

ts
const { data, pending, error, refresh } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains')
)

观察参数变化

内置的 watch 选项允许在检测到任何更改时自动重新运行 fetcher 函数。

ts
const page = ref(1)
const { data: posts } = await useAsyncData(
  'posts',
  () => $fetch('https://fakeApi.com/posts', {
    params: {
      page: page.value
    }
  }),
  {
    watch: [page]
  }
)

useAsyncData 是编译器转换后保留的函数名，所以你不应该命名你自己的函数 useAsyncData。

相关阅读：getting-started > data-fetching
上一篇
使用App配置 useAppConfig
下一篇
useCookie 使用Cookie