告别Axios？试试基于`fetch`的下一代请求库 Hook-Fetch，让API调用丝滑到飞起！

🔥 告别Axios？试试基于`fetch`的下一代请求库 Hook-Fetch，让API调用丝滑到飞起！

🤔 为什么选择 Hook-Fetch？

当你还在为Axios的「配置繁琐」「流式处理鸡肋」「插件扩展性有限」发愁时，Hook-Fetch 带着原生fetch的高性能与更贴合现代开发的设计来了！

核心优势对比：

特性	Axios	Hook-Fetch
底层依赖	独立封装	基于原生`fetch`，体积更小，浏览器兼容性原生级支持
响应处理	仅默认JSON解析，需手动处理其他格式	内置`text()/blob()/formData()/stream()`等8种解析方式，开箱即用
请求控制	通过`CancelToken`复杂取消	`req.abort()`一键中断，`req.retry()`无缝重试，链式操作更丝滑
插件系统	仅请求/响应拦截器	5大生命周期钩子（含流式数据处理），支持自定义插件深度干预
TypeScript支持	需手动声明类型	内置完整泛型，自动推导请求/响应类型，TS开发者福音

✨ 四大核心功能，重新定义API调用体验

1. 一行代码搞定N种响应格式，拒绝繁琐转换！

Axios处理非JSON数据需要手动调用response.data，而Hook-Fetch直接暴露原生fetch能力，

无需额外配置即可轻松处理：

typescript 复制代码

// 自动解析JSON（默认）
const jsonData = await hookFetch('/api/data');
// 文本/Blob/二进制流一键获取
const text = await req.text();
const blob = await req.blob();
// 流式处理SSE（Server-Sent Events）
for await (const chunk of req.stream()) {
  // 插件可直接处理流式数据块
  console.log(chunk.result);
}

优势：省去中间转换步骤，直接操作原生Response对象，性能与灵活性双在线！

2. 请求中断/重试太麻烦？链式操作让控制更简单！

Axios取消请求需创建CancelToken，重试需手动封装逻辑；Hook-Fetch将控制能力集成到请求实例中 一行代码实现丝滑操作：

typescript 复制代码

const req = api.get('/长耗时接口');
// 1秒后中断请求 setTimeout(() => req.abort(), 1000);
// 中断后重试，复用原始配置 const newReq = req.retry();
const result = await newReq;

场景适配：网络波动重试、用户主动取消请求等场景，代码量减少50%+！

3. 插件系统：从请求到响应，全流程自定义！

Axios的拦截器仅支持请求/响应阶段，Hook-Fetch提供

5大生命周期钩子，覆盖从配置处理到流式数据转换的全流程：

typescript 复制代码

// 自定义SSE文本解码插件（原生支持流式处理）
const ssePlugin = () => ({
  name: 'sse',
  async transformStreamChunk(chunk) {
    chunk.result = new TextDecoder().decode(chunk.result);
    // 直接处理流数据块
    return chunk;
}
});
// 全局注册，所有请求生效
api.use(ssePlugin());

适用场景：请求签名、响应数据校验、流式数据格式化等，插件可插拔，生态扩展无限可能！

4. TypeScript深度适配，类型推导零负担！如果你是TS用户，Hook-Fetch的泛型支持将让你告别手动声明类型的痛苦：

typescript 复制代码

interface User { id: number; name: string; }
// 自动推导响应类型，编辑器实时提示
const user: User = await api.get<User>('/users/1');
console.log(user.name);
// 类型安全，拒绝运行时错误！

🚀 快速上手，3分钟替代Axios！

安装：

bash 复制代码

npm install hook-fetch
# 或yarn/pnpm

基础使用：

typescript 复制代码

import hookFetch from 'hook-fetch';
// GET/POST/PUT/DELETE等全方法支持
const response = await hookFetch('https://api.com', { method: 'POST', data: { name: 'hook-fetch' } });
// 创建实例，复用基础配置
const api = hookFetch.create({ baseURL: 'https://api.com', timeout: 5000 });
const user = await api.get('/users/1');

📢 谁该选择Hook-Fetch？

✅ 追求轻量化与原生能力的现代前端项目（React/Vue/Nuxt等） ✅ 需要处理流式数据（SSE、大文件上传下载）的场景 ✅ 重视TypeScript类型安全的团队 ✅ 希望通过插件系统定制化请求流程的开发者

📖 文档与生态 - 完整文档含Type定义、插件示例、错误处理指南

后续计划：UMD支持、更多官方插件（如JWT鉴权、请求缓存）

现在就用Hook-Fetch重构你的API层，体验「更少代码，更强能力」的快乐！

👉 GitHub仓库 🌟 Star支持，一起打造更灵活的请求生态！ 基于fetch，但不止于fetch------Hook-Fetch，让API调用成为享受~

告别Axios？试试基于`fetch`的下一代请求库 Hook-Fetch，让API调用丝滑到飞起！