useAsyncData

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

bash

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

用法

基础用法

html

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

多个接口

const { data: discounts, pending } = await useAsyncData(
  "cart-discount",
  async () => {
    const [coupons, offers] = await Promise.all([
      $fetch("/cart/coupons"),
      $fetch("/cart/offers"),
    ]);

    return {
      coupons,
      offers,
    };
  }
);

监听函数

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

html

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

参数

key：

一个唯一的键，用于确保数据获取可以在请求中正确去重。如果不提供键，则会为 useAsyncData 的实例生成一个与文件名和行号唯一对应的键。

handler：

一个必须返回真值（例如，不能是 undefined 或 null）的异步函数，否则请求可能会在客户端上重复。

options：

server：是否在服务器上获取数据（默认为 true）
lazy：是否在加载路由后解析异步函数，而不是阻塞客户端导航（默认为 false）
immediate：当设置为 false 时，将阻止立即触发请求。（默认为 true）
default：在异步函数解析之前，设置 data 的默认值的工厂函数 - 在 lazy: true 或 immediate: false 选项下非常有用
transform：一个在解析后可以用来修改 handler 函数结果的函数
pick：只从 handler 函数结果中选择指定的键
watch：监听响应式源以自动刷新
deep：以深层响应式对象返回数据（默认为 true）。可以将其设置为 false 以返回浅层响应式对象的数据，如果你的数据不需要深层响应式，则可以提高性能。

返回值

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

useAsyncData ​

用法 ​

基础用法 ​

多个接口 ​

监听函数 ​

参数 ​

key： ​

handler： ​

options： ​

返回值 ​