useClientApiFetch
仅客户端执行的 API 请求 composable，适用于非 SEO 敏感数据。
Usage
使用自动导入的 useClientApiFetch composable 进行仅客户端的 API 请求。这是 useApiFetch 的简化版本，预设了 server: false 和 lazy: true。
<script setup lang="ts">
interface UserPreferences {
theme: 'light' | 'dark'
language: string
notifications: boolean
}
// 基础用法(仅客户端执行)
const { data, pending, execute } = useClientApiFetch<UserPreferences>('/user/preferences')
// 组件挂载时触发请求
onMounted(() => execute())
// POST 请求
const updatePreferences = async (prefs: UserPreferences) => {
const { data } = useClientApiFetch('/user/preferences', {
method: 'POST',
body: prefs
})
await execute()
}
</script>
useClientApiFetch继承useApiFetch的所有功能。- 默认不自动执行，需要手动调用
execute()触发请求。 - 仅在客户端执行，不参与服务端渲染。
由于
server: false + lazy: true 的特性，数据获取会等到客户端 hydration 完成后才执行。即使在 <script setup> 中 await execute()，初始渲染时 data 仍为 null。正确做法是在 onMounted 或用户交互时调用 execute()，并使用 pending 状态管理加载提示。适用场景:用户偏好设置、实时通知、客户端缓存数据等非 SEO 敏感内容。对于需要 SEO 的数据，请使用
useApiFetch。API
useClientApiFetch()
useClientApiFetch<ResT = unknown, DataT = ResT>(url: string | (() => string), options?: UseApiFetchOptions<ResT, DataT>): UseApiFetchReturn<DataT>
创建仅客户端执行的 API 请求。
Parameters
url
string | (() => string) required
请求 URL 或返回 URL 的函数。
options
UseApiFetchOptions<ResT, DataT>
请求配置选项。完整选项参考
useApiFetch。server: false- 禁用服务端执行lazy: true- 启用 lazy 模式
Type Parameters
参数与 useApiFetch 相同。
Returns
返回值与 useApiFetch 相同，但 execute 函数必须手动调用才会发起请求。