useApiFetch

<script setup lang="ts">
interface User {
  id: number
  name: string
  email: string
}

// 基础用法(自动解包 data 字段)
const { data, pending, error, refresh } = await useApiFetch<User[]>('/users')

// POST 请求
const { data } = await useApiFetch('/users', {
  method: 'POST',
  body: { name: 'test', email: 'test@example.com' }
})

// 使用其他端点
const { data } = await useApiFetch('/users', { endpoint: 'v2' })
</script>

// 泛型 T 直接声明业务数据类型（即 data 字段的类型）
const { data } = await useApiFetch<User>('/user')
// data.value = { id: 1, name: 'test' }

// 结合 transform 做二次转换
const { data } = await useApiFetch<{ content: User[] }, SelectItem[]>('/users', {
  transform: ({ content }) => content.map(u => ({ label: u.name, value: u.id }))
})

// 业务状态码错误
{
  code: 400,
  message: '用户名已存在'
}
// 自动抛出 ApiError，显示 Toast: "用户名已存在"
// error.value 包含 statusCode、response、isBusinessError 等信息

const { data } = await useApiFetch('/external', {
  skipBusinessCheck: true
})
// 不校验 code 是否在 successCodes 中
// 但仍会提取 response[dataKey]（无该字段时回退到完整响应）

// 禁用所有 Toast
const { data } = await useApiFetch('/users', {
  toast: false
})

// 仅显示错误提示
const { data } = await useApiFetch('/users', {
  toast: { success: false }
})

// 使用快捷文本
const { data } = await useApiFetch('/users', {
  toast: {
    successMessage: '创建成功!',
    errorMessage: '创建失败,请重试'
  }
})

// 使用完整的 Toast 属性
const { data } = await useApiFetch('/users', {
  toast: {
    success: {
      title: '创建成功',
      description: '用户已添加到系统',
      color: 'primary',
      icon: 'i-lucide-circle-check'
    },
    error: {
      title: '创建失败',
      description: '请检查输入信息',
      color: 'danger',
      timeout: 5000
    }
  }
})