🚀 Fetcher

超轻量级 • 模块化 • TypeScript 优先 • 拦截器驱动 • LLM 流式 API 支持

Fetcher v1.8.9 发布：更强大的请求处理与开发者体验升级 🚀

我们很高兴发布 Fetcher v1.8.9！这个版本带来了众多令人兴奋的新特性、性能优化和开发者体验改进，让您的网络请求处理更加高效和灵活。

✨ 核心亮点

🎯 全新的 React Hooks

• useFetcher Hook: 全新的数据获取钩子，为 React 应用提供无缝的数据请求体验
• useKeyStorage Hook: 强大的 KeyStorage 状态管理钩子，支持并发模式优化

🔐 增强的安全能力

• 可配置资源归属拦截器: 灵活配置的请求拦截机制，增强API安全性
• JWT令牌管理增强: 支持早期过期周期处理，提升令牌安全性
• 令牌刷新锁定机制: 防止重复刷新，确保令牌管理的稳定性

🚀 性能优化

• 请求拦截性能提升: 优化拦截器处理流程，减少请求延迟
• 结果提取器重构: 简化的结果提取API，提升数据处理效率
• 并发模式支持: useKeyStorage 钩子针对并发模式进行了专门优化

📦 主要新特性

请求处理增强

• PartialBy 工具类型: 创建具有可选属性的新类型
• URL模板解析器: 支持 URI 和 Express 风格模板
• 自定义中止控制器: 更好的请求超时和取消控制
• 属性参数支持: 拦截器间通信更加灵活

存储系统升级

• 可监听存储接口: 全新的事件监听存储系统
• 跨环境存储支持: 统一浏览器和Node.js环境下的存储体验
• 增强的 KeyStorage: 改进的键值存储管理

查询功能强化

• 游标查询支持: cursorQuery 函数添加
• 条件查询优化: AND/OR 条件创建器支持空条件
• 分页查询改进: pagedQuery 工厂函数和选项对象配置

🐛 问题修复

• 确保 AbortController 正确分配给请求
• 修复 JWT 令牌处理中的空载荷情况
• 修正浏览器环境检测实现
• 处理 AND/OR/NOR 函数中的边界情况

📚 文档改进

• 更新 README 文档和拦截器命名
• 添加 Serializer 接口详细文档
• 完善 KeyStorage 类和选项接口文档

🚀 开始使用

立即升级到 v1.8.9，体验这些强大的新特性：

pnpm update @ahoo-wang/fetcher

import { createLlmFetcher, LlmClient } from './llmClient';

// 使用您的 API 配置初始化 LLM 客户端
const llmFetcher = createLlmFetcher({
  baseURL: 'https://api.openai.com/v1',
  apiKey: process.env.OPENAI_API_KEY || 'your-api-key',
  model: 'gpt-3.5-turbo',
});

const llmClient = new LlmClient();

// 流式聊天完成，逐个令牌输出
async function streamChatExample() {
  const stream = await llmClient.streamChat({
    messages: [
      { role: 'system', content: 'You are a helpful assistant.' },
      { role: 'user', content: 'Explain quantum computing in simple terms.' },
    ],
    stream: true,
  });

  for await (const event of stream) {
    if (event.data) {
      const chunk = event.data;
      const content = chunk.choices[0]?.delta?.content || '';
      process.stdout.write(content); // 实时输出
    }
  }
}

# 安装核心包
npm install @ahoo-wang/fetcher

# 或安装所有扩展，包括 LLM 流支持
npm install @ahoo-wang/fetcher @ahoo-wang/fetcher-decorator @ahoo-wang/fetcher-eventstream @ahoo-wang/fetcher-cosec

# 使用 pnpm (推荐)
pnpm add @ahoo-wang/fetcher

# 使用 yarn
yarn add @ahoo-wang/fetcher

import { Fetcher } from '@ahoo-wang/fetcher';

// 创建 fetcher 实例
const fetcher = new Fetcher({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 带路径和查询参数的 GET 请求
const response = await fetcher.get('/users/{id}', {
  urlParams: {
    path: { id: 123 },
    query: { include: 'profile' },
  },
});
const userData = await response.json<User>();

// 自动 JSON 转换的 POST 请求
const createUserResponse = await fetcher.post('/users', {
  body: { name: 'John Doe', email: 'john@example.com' },
});

import { NamedFetcher } from '@ahoo-wang/fetcher';
import {
  api,
  get,
  post,
  path,
  query,
  body,
} from '@ahoo-wang/fetcher-decorator';

// 注册命名 fetcher
const apiFetcher = new NamedFetcher('api', {
  baseURL: 'https://api.example.com',
});

// 使用装饰器定义服务
@api('/users', { fetcher: 'api' })
class UserService {
  @get('/')
  getUsers(@query('limit') limit?: number): Promise<User[]> {
    throw new Error('Auto-generated');
  }

  @post('/')
  createUser(@body() user: User): Promise<User> {
    throw new Error('Auto-generated');
  }

  @get('/{id}')
  getUser(@path('id') id: number): Promise<User> {
    throw new Error('Auto-generated');
  }
}

// 使用服务
const userService = new UserService();
const users = await userService.getUsers(10);

import { Fetcher } from '@ahoo-wang/fetcher';

const fetcher = new Fetcher({ baseURL: 'https://api.example.com' });

// 添加带排序的请求拦截器
fetcher.interceptors.request.use({
  name: 'auth-interceptor',
  order: 100,
  intercept(exchange) {
    exchange.request.headers.Authorization = 'Bearer ' + getAuthToken();
  },
});

// 添加响应拦截器用于日志记录
fetcher.interceptors.response.use({
  name: 'logging-interceptor',
  order: 10,
  intercept(exchange) {
    console.log('Response:', exchange.response.status);
  },
});

import { Fetcher } from '@ahoo-wang/fetcher';
import { EventStreamInterceptor } from '@ahoo-wang/fetcher-eventstream';

const fetcher = new Fetcher({ baseURL: 'https://api.example.com' });
fetcher.interceptors.response.use(new EventStreamInterceptor());

// 流式实时事件 (通用 SSE)
const response = await fetcher.get('/events');
if (response.eventStream) {
  for await (const event of response.eventStream()) {
    console.log('Real-time event:', event);
  }
}

// 流式 LLM 响应，逐个令牌输出
const llmResponse = await fetcher.post('/chat/completions', {
  body: {
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: 'Hello!' }],
    stream: true,
  },
});

if (llmResponse.jsonEventStream) {
  // 专门用于 LLM API 的 JSON SSE 事件
  for await (const event of llmResponse.jsonEventStream<ChatCompletionChunk>()) {
    const content = event.data.choices[0]?.delta?.content || '';
    process.stdout.write(content); // 实时令牌输出
  }
}

# 安装依赖
pnpm install

# 构建所有包
pnpm build

# 运行单元测试和覆盖率
pnpm test:unit

# 格式化代码
pnpm format

# 清理构建产物
pnpm clean

# 运行集成测试
#pnpm test:it

pnpm update-version <new-version>