FetchApiService 调用方式说明

FetchApiService 提供了灵活的多种调用方式，满足不同场景需求。

导入方式

// 导入 FetchApiService 和 ApiError
import { FetchApiService, ApiError } from '@qxs-bns/utils'

// 导入类型
import type { UseApiResponse, ApiTypeMap, UrlObjectType } from '@qxs-bns/utils'

一、useApi 方法（返回 { res, error }）

方式 1：参数在 config 对象中

const { res, error } = await api.useApi({
  ...Urls.getUser,
  params: { id: 1 }
})

方式 2：参数作为第二个参数（兼容 use-api.ts）

const { res, error } = await api.useApi(
  Urls.getUser,
  { id: 1 }
)

方式 3：混合使用（第二个参数优先）

const { res, error } = await api.useApi(
  { ...Urls.getUser, params: { id: 1 } },
  { id: 2 }  // ✅ 优先使用这个
)

方式 4：带额外配置

const { res, error } = await api.useApi({
  ...Urls.getUser,
  params: { id: 1 },
  timeout: 5000,
  retry: 2,
  _silent: true
})

二、apiClient 方法（直接返回数据或抛错）

方式 1：参数在 config 中

try {
  const data = await api.apiClient({
    ...Urls.createUser,
    data: { name: 'John', email: 'john@example.com' }
  })
} catch (error) {
  console.error(error)
}

方式 2：参数作为第二个参数

const data = await api.apiClient(
  Urls.createUser,
  { name: 'John', email: 'john@example.com' }
)

方式 3：带额外配置

const data = await api.apiClient({
  ...Urls.getUser,
  params: { id: 1 },
  timeout: 10000
})

三、特殊场景

流式响应（大模型）

const { res: stream } = await api.useApi({
  ...Urls.chatStream,
  data: { message: 'Hello AI' }
})

const reader = stream.getReader()
const decoder = new TextDecoder()

while (true) {
  const { done, value } = await reader.read()
  if (done) break
  console.log(decoder.decode(value))
}

自定义错误处理

const { res, error } = await api.useApi({
  ...Urls.getUser,
  params: { id: 1 },
  _silent: true,  // 401 不弹登录框
  _actionContext: '获取用户信息'  // 自定义操作说明
})

总结

调用方式	useApi	apiClient
config 中传参	✅	✅
第二个参数传参	✅	✅
混合传参	✅	✅
额外配置	✅	✅
返回格式		直接返回数据
错误处理	不抛错	抛错

灵活度：非常高！可以根据个人习惯选择任意方式。