Vercel AI SDK 实战：如何拦截和修改 Fetch 请求

最新推荐文章于 2025-06-02 09:19:31 发布

原创最新推荐文章于 2025-06-02 09:19:31 发布

· 305 阅读

10 ·

版权

Vercel AI SDK 实战：如何拦截和修改 Fetch 请求

ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/gh_mirrors/ai/ai

在现代前端开发中，与 AI 服务的交互变得越来越普遍。Vercel AI SDK 提供了一种优雅的方式来处理这些交互，特别是通过拦截和修改 fetch 请求这一强大功能。本文将深入探讨这一技术，帮助开发者更好地控制和定制 AI 服务调用。

为什么需要拦截 Fetch 请求？

在 AI 应用开发中，我们经常需要对 API 请求进行额外的处理。以下是几个典型场景：

调试与日志记录：记录请求和响应数据，便于问题排查
安全增强：动态添加认证头信息
数据转换：在发送前修改请求体，或处理响应数据
性能优化：实现响应缓存机制
兼容性处理：使用自定义 HTTP 客户端替代原生 fetch

核心实现原理

Vercel AI SDK 的设计允许开发者为各种 AI 服务提供商（如 OpenAI）的工厂函数提供一个自定义的 fetch 实现。这个自定义函数会在 SDK 内部发起实际请求前被调用，给予开发者完全的控制权。

实战示例

让我们通过一个完整的示例来理解如何实现请求拦截：

import { generateText } from 'ai';
import { createOpenAI } from '@ai-sdk/openai';

// 创建自定义 OpenAI 客户端实例
const openai = createOpenAI({
  // 自定义 fetch 实现，添加日志功能
  fetch: async (url, options) => {
    // 记录请求 URL
    console.log('请求 URL:', url);
    
    // 记录请求头（美化输出）
    console.log('请求头:', JSON.stringify(options!.headers, null, 2));
    
    // 记录请求体（解析并美化）
    const requestBody = options!.body ? JSON.parse(options!.body as string) : {};
    console.log('请求体:', JSON.stringify(requestBody, null, 2));
    
    // 执行实际请求
    const response = await fetch(url, options);
    
    // 这里也可以对响应进行处理
    return response;
  },
});

// 使用自定义客户端生成文本
const { text } = await generateText({
  model: openai('gpt-3.5-turbo'),
  prompt: '为什么天空是蓝色的？',
});

高级应用场景

1. 添加认证头

fetch: async (url, options) => {
  // 添加自定义认证头
  const headers = {
    ...options?.headers,
    'X-API-KEY': 'your-secret-key-here',
    'X-Request-ID': generateUniqueId()
  };
  
  return fetch(url, { ...options, headers });
}

2. 实现请求缓存

const responseCache = new Map();

fetch: async (url, options) => {
  const cacheKey = `${url}-${options?.body}`;
  
  // 检查缓存
  if (responseCache.has(cacheKey)) {
    return responseCache.get(cacheKey);
  }
  
  const response = await fetch(url, options);
  
  // 缓存响应（可根据需要设置过期时间）
  responseCache.set(cacheKey, response.clone());
  
  return response;
}

3. 请求重试机制

fetch: async (url, options, retries = 3) => {
  try {
    return await fetch(url, options);
  } catch (error) {
    if (retries > 0) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return fetch(url, options, retries - 1);
    }
    throw error;
  }
}