TypeScript封装Fetch请求管理类需支持默认配置、拦截器、超时控制与类型安全:构造函数接收baseURL、headers、timeout等;内置get/post/put/delete方法,自动序列化/解析JSON、处理URL参数;统一错误分层(网络/HTTP/业务),支持AbortController取消、token动态注入、重试机制及简易内存缓存。

封装一个通用的 Fetch 请求管理类,核心是统一处理请求配置、错误拦截、响应解析和常用功能(如 loading、token、超时),同时保持调用简洁、可扩展、类型安全(配合 TypeScript 更佳)。
基础结构:构造函数 + 配置项
用 class 封装,构造时接收默认配置(baseURL、headers、timeout 等),便于复用和多环境切换:
- baseURL 支持拼接路径,避免每个接口写全地址
- headers 默认携带 Authorization(从 localStorage 或 token store 读取)
- timeout 可通过 AbortController 实现,Fetch 原生不支持超时,需手动控制
- 支持传入自定义拦截器(请求前、响应后)
请求方法封装:get / post / put / delete
每个方法返回 Promise,内部统一调用 fetch,并做标准化响应处理:
- 自动序列化 body(JSON.stringify)并设置 Content-Type: application/json
- 自动解析 response.json(),对非 2xx 状态码抛出错误(含 status、statusText、data)
- GET 请求自动将 params 对象转为 URL 查询字符串(可用 URLSearchParams)
- 支持传入 signal(用于取消请求),方便与 React 的 useEffect cleanup 或组件卸载联动
错误与状态统一处理
不把错误全扔给上层 try/catch,而是分层处理:
立即学习“Java免费学习笔记(深入)”;
- 网络错误(如断网、DNS 失败)→ 捕获 TypeError 或 AbortError
- HTTP 错误(4xx/5xx)→ 提取后端返回的 error 字段或 message,默认 fallback 为 statusText
- 业务错误(如 { code: 4001, msg: "登录过期" })→ 在响应拦截中判断 code,触发全局登出或提示
- 可选:内置重试机制(针对网络抖动),用指数退避 + 最大重试次数
进阶能力:拦截器、缓存、Loading 管理
真正提升复用性的是可插拔逻辑:
- 请求拦截器:添加 token、埋点日志、修改 url 或 headers
- 响应拦截器:统一解包 data 字段(如 { code: 0, data: {...}, msg: "" } → 直接返回 data)、记录耗时
- 简易内存缓存:对只读 GET 请求,key 为完整 url + params,5s 内重复请求直接返回缓存(适合列表页刷新防抖)
- loading 状态:提供 startLoading / endLoading 方法,配合 UI 层(如 useRequest Hook)驱动 loading 显示


















