Skip to content

FetchApiService

FetchApiService@qxs-bns/utils 里基于 ky 的请求封装,适合需要统一错误处理、流式响应和双调用形态的场景。

请求调用链路

这页最重要的不是某个孤立参数,而是先理解 FetchApiService 的调用顺序:先定义地址对象,再决定用 useApi 还是 apiClient,最后统一处理错误。
先把这条链路理解清楚,再看后面的不同调用写法就不会乱。

loading

基础用法

ts
import { FetchApiService, ApiError } from '@qxs-bns/utils'

FetchApiService 的实际用法准备对应请求依赖即可,例如 ky

ky 版本要求

当前 FetchApiService 对应的推荐依赖是 ky@^2.0.0
ky@2 官方要求 Node >= 22,如果你的业务运行环境还停留在 Node 20,需要先完成 Node 升级,或者暂时不要切这条链路。

useApi:返回 { res, error }

useApi 适合列表页、容错页和需要把错误统一收口到业务层的场景。
它有两种主用法:

  • 单参数调用时,直接透传 kysearchParams / json
  • 双参数调用时,会自动按 GET -> searchParams非 GET -> json 的规则映射请求数据。
loading

apiClient:直接返回数据或抛错

apiClient 适合需要直接拿数据继续串联逻辑、或者明确希望在 try / catch 中处理异常的场景。
useApi 一样,它也支持单参数和双参数两种调用形态;差别在于失败时会直接抛出错误。

loading

特殊场景:流式响应

如果接口返回的是 text/event-streamFetchApiService 不会帮你提前消费响应体,而是把 ReadableStream 直接放进 res 或直接作为返回值交给宿主。
也就是说,真正的分段读取、拼接和渲染仍然在业务侧完成。

loading

规则总结

调用方式useApiapiClient
单参数:searchParams / json
双参数自动映射请求数据
返回 { res, error }
直接返回数据
失败时抛错
支持流式响应

使用建议

  • 页面想统一判断 error,优先用 useApi
  • 业务链路要直接 await 数据并走 try / catch,优先用 apiClient
  • 单参数调用不要再写 params / data,而是直接使用 kysearchParams / json
  • 双参数调用更适合业务层封装,能少写一层 searchParams / json 判断。

相关文档

FetchApiService has loaded