封装通用 Fetch 工具函数需统一处理配置、错误、Token、Loading、超时及响应标准化；采用原生实现，支持工厂模式创建实例、自动序列化/解析 JSON、结构化错误抛出、Token 注入与刷新、TypeScript 泛型及 AbortController 超时控制。
封装通用的 Fetch 工具函数，核心是统一处理请求配置、错误响应、Token 携带、Loading 状态（如需）、超时控制和返回数据标准化。不依赖第三方库，纯原生实现更轻量、可控性强。
基础封装：支持默认配置与请求拦截
用工厂函数创建可复用的 fetch 实例，避免每次手动拼接 headers 或 baseURL：
- 设置默认 baseURL、Content-Type、Accept 和认证 header（如 Authorization）
- 允许传入 options 覆盖默认项，比如 method、body、headers
- 自动序列化 JSON 请求体，并解析 JSON 响应体
- 对非 2xx 响应抛出结构化错误（含 status、statusText、data）
const createFetch = (baseURL = '') => {
return async (url, options = {}) => {
const config = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
...options.headers,
},
...options,
};
const fullURL = baseURL + url;
const res = await fetch(fullURL, config);
if (!res.ok) {
const data = await res.json();
throw { status: res.status, statusText: res.statusText, data };
}
return res.json();
};
};
const api = createFetch('https://api.example.com');
// 使用：api('/users').then(...)
增强功能：自动携带 Token 与刷新逻辑（可选）
登录态管理常见需求，可在 fetch 工厂中注入 token 获取方式，支持异步 Token 刷新：
- 从 localStorage / cookie / auth store 中读取 token
- 在 headers 中自动注入 Authorization 字段
- 遇到 401 时触发 refreshToken，重试原请求（需避免无限循环）
- 使用 AbortController 控制单次请求生命周期
类型安全与 TypeScript 支持
添加泛型让响应数据类型可推导，提升开发体验：
立即学习“Java免费学习笔记（深入）”；
- 定义通用响应结构，如
{ code: number; data: T; message?: string } - fetch 函数返回
Promise<ApiResponse<T>> - 对 POST/PUT 请求的 body 类型做泛型约束（如
body: B）
as const 或 Zod 运行时校验，进一步保障后端接口变更时的健壮性。
扩展能力：支持 Abort、Timeout 和 Loading 状态（视场景）
实际项目中常需取消请求或限制等待时间：
- 通过
AbortController实现手动 abort，适合表单输入防抖、页面卸载清理 - 用 Promise.race 实现超时控制（注意：fetch 本身不支持 timeout，需自行包装）
- 若配合 React/Vue，可将 loading 状态作为返回值的一部分（如返回
{ loading, data, error }对象）
