useLazyApiFetch

View source
懒加载版 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 初始为 nullstatus'pending',需要处理加载状态。
  • 继承 useApiFetch 的所有功能(认证、Toast、业务状态码检查等)。
对于首屏必需的数据,应使用 useApiFetch(非 lazy 模式),以阻塞导航确保数据就绪。
完整的 API 选项和功能说明请参考 useApiFetch 文档

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 并重构文档结构
Copyright © 2025 - 2026 YiXuan - MIT License