async函数封装web api的核心是统一处理请求生命周期：请求前自动加token、设超时、开loading；成功后解析json、校验code、提取data；失败时区分网络/http/业务错误并抛出结构化错误；最终统一关loading。
用 async 函数封装 Web API 请求，核心是把“发请求—等响应—处理结果—统一收尾”这一整套流程收进一个可复用、易维护的函数里，而不是每次写重复的 try/catch、JSON 解析、错误提示或 loading 控制。
统一处理请求生命周期
一个健壮的 async 封装要覆盖请求前、成功后、失败时、最终执行四个阶段：
- 请求前：自动添加 token、设置超时、拼接 base URL、打开 loading 状态
- 成功后：自动解析 JSON、校验业务状态码（如 code === 200）、提取 data 字段
- 失败时：区分网络错误（fetch 失败）、HTTP 错误（4xx/5xx）、业务错误（code !== 200），并统一抛出结构化错误对象
- 最终执行：无论成功失败都关闭 loading、清空临时状态，避免 UI 卡在加载中
支持多种调用方式，适配不同场景
不是所有地方都适合 await，有些组件需要回调风格（比如 Ant Design 的表单提交），有些则需要 Promise 链式调用。封装函数应灵活支持：
- 纯 async/await 调用：const res = await api.get('/user')
- 带回调的异步调用：api.post('/order', data, { onSuccess: () => {}, onError: () => {} })
- 返回 Promise 实例，方便组合：Promise.all([api.get('/a'), api.get('/b')])
内置拦截与扩展能力
真正的封装不只是简化语法，更要为后续演进留出空间：
- 请求拦截：自动注入 Authorization、DeviceType、TraceID 等通用头
- 响应拦截：对特定 status code 做全局处理（如 401 跳登录页、429 自动重试）
- 可选配置项：每个请求可单独覆盖 timeout、retry、showToast 等行为
- 类型安全（TS 友好）：返回值自动推导 data 类型，例如 api.get
('/user/123')
避免常见陷阱
封装容易，但写得不严谨反而埋坑：
- 别每次 new fetch 或 axios 实例——应复用单例客户端，防止端口耗尽
- 别直接 throw error.message——保留原始 response、status、config，便于排查
- 别在 finally 里修改 state——它不区分成功失败，不适合做“仅成功后更新数据”的逻辑
- 别忽略 AbortController——长列表滚动中取消上一个请求，避免状态错乱
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
