🚀 Hook-Fetch 新版本发布：Vue & React Hooks 正式登场！

🚀 Hook-Fetch 新版本发布：Vue & React Hooks 正式登场！

亲爱的开发者们，Hook-Fetch 库迎来了重要更新！继上次推出强大的插件系统和流式处理后，本次更新重点添加了对 Vue 3 和 React 的官方 Hooks 支持，让你在组件中使用 API 请求更加便捷高效。同时，我们也提供了完善的 TypeScript 支持方案，解决代码提示问题。

---

🌟 新功能亮点

1. Vue 3 组合式 API 支持

• 通过 useHookFetch 钩子在 Vue 组件中轻松管理请求状态
• 自动处理加载状态、错误捕获和请求取消

<template>
  <div>
    <button @click="handleSend">获取流式数据</button>
    <div v-if="loading">加载中...</div>
    <div v-else>暂无数据</div>
    <button @click="cancel">取消请求</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useHookFetch } from 'hook-fetch/vue'
import { sseTextDecoderPlugin } from 'hook-fetch/plugins';
import hookFetch from 'hook-fetch'

// 用户类型
interface SendDTO {
}

const api = hookFetch.create({ baseURL: 'https://api.example.com' });
api.use(sseTextDecoderPlugin({json: true, prefix: 'data:', doneSymbol: '[DONE]'}))
export const send = (data: SendDTO) => api.post<null>('/chat/send', data);

const { stream, loading, cancel, onError } = useHookFetch({
  request: send,
  onError: (e) => console.error('请求错误:', e),
})

const handleSend = async () => {
  try {
    const params:SendDTO = {}; // 参数
    for await (const chunk of stream(params)) {
        console.log(chunk.result)
    }
  } catch (e) {
    console.error(e)
  }
}
</script>

---

2. React Hooks 无缝集成

• 在函数组件中优雅地处理 API 请求
• 支持依赖项更新和自动清理

import React, { useState } from 'react';
import { useHookFetch } from 'hook-fetch/react';
import { sseTextDecoderPlugin } from 'hook-fetch/plugins';
import hookFetch from 'hook-fetch';

interface SendDTO{
}

const api = hookFetch.create({ baseURL: 'https://api.example.com' });
api.use(sseTextDecoderPlugin({json: true, prefix: 'data:', doneSymbol: '[DONE]'}));
export const send = (data: SendDTO) => api.post<null>('/chat/send', data);

const { stream, loading, cancel, onError } = useHookFetch({
  request: send,
  onError: (e) => console.error('请求错误:', e),
})

const handleSend = useCallback(async () => {
  try {
    const params:SendDTO = {}; // 参数
    for await (const chunk of stream(params)) {
        console.log(chunk.result)
    }
  } catch (e) {
    console.error(e)
  }
},[])

  return (
    <div>
      <button onClick={handleSend}>获取流式数据</button>
      <button onClick={cancel}>取消请求</button>

      {loading && <div>加载中...</div>}
    </div>
  );
};

---

🧩 解决 TypeScript 代码提示问题

为了让 VSCode 正确识别 Hooks 的类型定义，有两种方式可供选择：

方法一：在 tsconfig.json 中添加类型引用

{
  "compilerOptions": {
    "types": [
      "hook-fetch/plugins"
      "hook-fetch/react",
      "hook-fetch/vue"
    ]
  }
}

方法二：创建类型声明文件

在项目根目录或 src 目录下创建 hook-fetch.d.ts，添加：

/// <reference types="hook-fetch/plugins" />
/// <reference types="hook-fetch/react" />
/// <reference types="hook-fetch/vue" />

---

📦 安装与升级

# 升级现有版本
npm update hook-fetch
# 或
pnpm update hook-fetch

---

📚 完整文档与示例

更多使用场景和高级配置请查看 Hook-Fetch 官方文档，包括：

• 请求重试与中断
• 自定义插件开发
• 泛型类型推导
• 流式数据处理

---

欢迎在 GitHub 提交 Issue 或 PR，共同完善 Hook-Fetch！

---

💬 反馈与交流

• GitHub Issues：github.com/JsonLee1213…
• 开发者社区：discord.gg/666U6JTCQY

如果觉得 Hook-Fetch 对你有帮助，别忘了给项目点个 ⭐ 哦！