useLazyApiFetch
懒加载版 useApiFetch,不阻塞客户端导航,页面立即显示。
Usage
使用自动导入的 useLazyApiFetch composable 进行 API 请求,等价于 useApiFetch(url, { lazy: true })。lazy 模式下请求不会阻塞客户端导航,页面立即显示,数据在后台加载。
<script setup lang="ts">
interface User {
id: number
name: string
email: string
}
// 懒加载用户数据
const { data, status } = useLazyApiFetch<User[]>('/users')
</script>
<template>
<div>
<div v-if="status === 'pending'">
加载中...
</div>
<div v-else-if="status === 'error'">
加载失败
</div>
<div v-else-if="data">
<div v-for="user in data" :key="user.id">
{{ user.name }}
</div>
</div>
</div>
</template>
useLazyApiFetch不会阻塞客户端导航,适合非关键数据(如用户列表、评论等)。- 客户端导航时
data初始为null,status为'pending',需要处理加载状态。 - 继承
useApiFetch的所有功能(认证、Toast、业务状态码检查等)。
对于首屏必需的数据,应使用
useApiFetch(非 lazy 模式),以阻塞导航确保数据就绪。API
useLazyApiFetch()
useLazyApiFetch<T = unknown, DataT = T>(url: string | (() => string), options?: UseApiFetchOptions<T, DataT>): UseApiFetchReturn<DataT>
创建懒加载的 API 请求。
Parameters
url
string | (() => string) required
请求 URL 或返回 URL 的函数。支持响应式 URL。
options
UseApiFetchOptions<T, DataT>
请求配置选项。支持所有
useApiFetch 的选项。lazy 选项会被强制设为 true,无需手动指定。Type Parameters
T
type
业务数据类型(已由
$api 自动解包)。DataT
type
transform 转换后的最终类型。默认等于 T。Returns
返回值与 useApiFetch 相同。
Changelog
Soon
dba0c— feat: 新增 useLazyApiFetch 并重构文档结构