🚀 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="fetchUsers">获取用户列表</button>
    <div v-if="loading">加载中...</div>
    <ul v-else-if="users">
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <div v-else>暂无数据</div>
    <button @click="cancelRequest">取消请求</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useHookFetch } from 'hook-fetch/vue';
import hookFetch from 'hook-fetch';

const api = hookFetch.create({ baseURL: 'https://api.example.com' });
const { request, loading, cancel: cancelRequest } = useHookFetch({
  request: api.get,
  onError: (error) => console.error('请求错误:', error),
});

const users = ref(null);

const fetchUsers = async () => {
  try {
    const data = await request('/users');
    users.value = data;
  } catch (error) {
    console.error('获取用户失败', error);
  }
};
</script>

---

2. React Hooks 无缝集成

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

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

const api = hookFetch.create({ baseURL: 'https://api.example.com' });

const UserList = () => {
  const [userId, setUserId] = useState(1);
  const { request, loading, data, error, cancel } = useHookFetch({
    request: () => api.get(`/users/${userId}`),
    dependencies: [userId],
    onSuccess: (response) => console.log('请求成功:', response),
  });

  return (
    <div>
      <input
        type="number"
        value={userId}
        onChange={(e) => setUserId(Number(e.target.value))}
      />
      <button onClick={request}>获取用户</button>
      <button onClick={cancel}>取消请求</button>

      {loading && <div>加载中...</div>}
      {error && <div>错误: {error.message}</div>}
      {data && (
        <div>
          <h3>{data.name}</h3>
          <p>邮箱: {data.email}</p>
        </div>
      )}
    </div>
  );
};

---

🧩 解决 TypeScript 代码提示问题

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

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

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

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

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

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

---

⚙️ 更多高级用法

流式数据处理与 Hooks 结合（Vue 示例）

<template>
  <div>
    <button @click="startStream">启动流</button>
    <div v-for="chunk in streamChunks" :key="chunk.id">
      <p>收到数据: {{ chunk.message }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { useHookFetch } from 'hook-fetch/vue';
import hookFetch from 'hook-fetch';

const api = hookFetch.create({ baseURL: 'https://api.example.com' });
const streamChunks = ref([]);
const { stream, cancel } = useHookFetch({ request: api.get });

const startStream = async () => {
  streamChunks.value = [];
  try {
    for await (const chunk of stream('/stream-data')) {
      streamChunks.value.push(chunk);
    }
  } catch (error) {
    console.error('流处理错误', error);
  }
};

onUnmounted(() => cancel());
</script>

---

📦 安装与升级

# 升级现有版本
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 对你有帮助，别忘了给项目点个 ⭐ 哦！