useLazyFetch

源码
这个围绕 useFetch 的封装通过设置 `lazy` 选项为 `true`，立即触发导航。

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'">
    正在加载...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- 执行相关操作 -->
    </div>
  </div>
</template>
useLazyFetch 拥有与 useFetch 相同的函数签名。
await 一个 useLazyFetch 调用仅确保请求已初始化。在客户端导航时，数据可能不会立刻可用，因此你必须在组件模板中处理 pending 状态。
useLazyFetch 是编译器转换后的保留函数名，因此不应将自己的函数命名为 useLazyFetch。

类型

Signature
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 (对象)：与 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'>数据请求的状态。
clear() => void将 data 设为 undefined，error 设为 undefined，将状态重置为 idle，并取消所有待处理请求。
在 Docs > 4 X > API > Composables > Use Fetch#return Values 中查看详情

示例

处理加载中状态

app/pages/index.vue
<script setup lang="ts">
/* 导航会在获取完成前发生。
 * 请在组件模板内直接处理 'pending' 和 'error' 状态
 */
const { status, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // 因为初始时 posts 可能是 null，所以无法立即访问其内容，但可以通过观察它的变化处理
})
</script>

<template>
  <div v-if="status === 'pending'">
    正在加载...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- 执行相关操作 -->
    </div>
  </div>
</template>
在 Docs > 4 X > Getting Started > Data Fetching 中查看详情