useLazyFetch

源文件
这是一个对 useFetch 的封装，它会立即触发导航。

useLazyFetch 是对 useFetch 的封装。通过将 lazy 选项设置为 true，它允许在处理程序解析之前触发导航。

使用

默认情况下，useFetch 会阻塞导航，直到其异步处理程序解析完成。useLazyFetch 则允许立即进行导航，并在后台获取数据。

app/pages/index.vue
<script setup lang="ts">
const { status, data: posts } = await useLazyFetch('/api/posts')
</script>

<template>
  <div v-if="status === 'pending'">
    Loading ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>
useLazyFetch 具有与 useFetch 相同的签名。
等待 useLazyFetch 仅确保该调用已初始化。在客户端导航中，数据可能无法立即获取，你必须在组件的模板中处理 pending（挂起）状态。
useLazyFetch 是一个由编译器处理的保留函数名，因此你不应该将自己的函数命名为 useLazyFetch。

类型

签名
export function useLazyFetch<DataT, ErrorT> (
  url: string | Request | Ref<string | Request> | (() => string | Request),
  options?: UseFetchOptions<DataT>,
): Promise<AsyncData<DataT, ErrorT>>
useLazyFetch 等同于设置了 lazy: true 选项的 useFetch。完整类型定义请参阅 useFetch。

参数

useLazyFetch 接受与 useFetch 相同的参数

  • URL (string | Request | Ref<string | Request> | () => string | Request): 要获取的 URL 或请求。
  • options (object): 与 useFetch 选项相同，但 lazy 默认自动设置为 true。
阅读更多内容：Docs > 4 X > API > Composables > Use Fetch#parameters。

返回值

返回与 useFetch 相同的 AsyncData 对象

名称类型描述
dataRef<DataT | undefined>异步获取的结果。
refresh(opts?: AsyncDataExecuteOptions) => Promise<void>手动刷新数据的函数。
execute(opts?: AsyncDataExecuteOptions) => Promise<void>refresh 的别名。
errorRef<ErrorT | undefined>如果数据获取失败，返回的错误对象。
statusRef<'idle' | 'pending' | 'success' | 'error'>数据请求的状态。
pendingRef<boolean>指示当前请求是否正在进行中的布尔标志。
clear() => void将 data 重置为 undefined，将 error 重置为 undefined，将 status 设置为 idle，并取消任何待处理的请求。
阅读更多内容：Docs > 4 X > API > Composables > Use Fetch#return Values。

示例

处理挂起状态 (Handling Pending State)

app/pages/index.vue
<script setup lang="ts">
/* Navigation will occur before fetching is complete.
 * Handle 'pending' and 'error' states directly within your component's template
 */
const { status, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // Because posts might start out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>

<template>
  <div v-if="status === 'pending'">
    Loading ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>
在文档 > 4 X > 入门 > 数据获取中阅读更多信息。