nuxt3中的useAsyncData使用详解

nuxt3中的useAsyncData使用详解

useAsyncData可以在页面、组件、插件中来异步获取数据。在服务端和客户端都可以通过它来在页面加载之前异步等待获取数据。来对页面中的信息和数据进行初始化。在服务端的ssr过程中，nuxt框架会在页面渲染之前自动检测并执行页面、组件和插件中的useAsyncData方法。

使用示例

<!-- app.vue -->
<script setup>

const { data } = await useAsyncData('count', () => $fetch('/api/count')
// , {}
)
</script>

<template>
  Page visits: {{ data }}
</template>

方法的定义

// 定义一:
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>>

// 两个主要区别就是一个没有key,一个有key

// 可选参数的类型定义
type 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
}

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

传参详细说明

• key: 传入一个唯一的键值 ,主要为了防止在多个请求出现交叉时的返回数据错乱的问题。 也可以不传，内部会自动生成一个key。

• handler: 异步任务处理

• option

  • lazy: 是否在页面加载之后再等待执行异步任务，默认为false，表示在页面加载之前会阻塞，直到异步任务执行完。
  • default: 一个工厂方法, 在异步任务还未执行完时，生成一个默认的返回的数据,
  • server: 默认为true, 表示是会在服务器去执行异步任务获取数据
  • pick: 数组类型，表示只从异步任务返回数据之前，选择指定的数据返回。例如:

  <script setup>
  // 接口实际返回的数据 {"title":"dkdkkd", "description":"dkjskdjs", "other":"dksjdksj"}
  const { data: mountain } = await useFetch('/api/mountains/everest', { pick: ['title', 'description'] })
  </script>
  
  <template>
  <h1>{{ mountain.title }}</h1>
  <p>{{ mountain.description }}</p>
  </template>
  
  

返回数据详细说明

data:
异步任务返回的数据.

服务端在返回这个data的同时，会将data数据序列化并存放在payload里，payload和已经
渲染好的html文本一起发送给浏览器

在客户端(浏览器)第一次加载页面执行这个方法的时候，并不会真正的等待执行异步任务，而是先检查payload中是否已经存在此数据，如果存在则直接返回payload中的数据。这样客户端不用再次请求接口，而是直接拿到服务端已经请求过的数据。

然后在客户端切换路由过程中再次加载此页面时，会等待执行异步任务，此时data里是最新的数据。

pending:
boolean值，标识当前数据是否获取到了。

refresh/execute:
此返回值是一个函数对象，调用时会两次执行handler中的异步任务并更新data中的数据。

error:
包含获取失败信息的对象.

此方法很常用，很有必要仔细了解其中的参数和返回值，以及在ssr过程的调用。


版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3中的useAsyncData使用详解