Orval项目中如何为Fetch自定义实例添加RequestInit参数支持

在基于OpenAPI规范的前端API代码生成工具Orval中，开发者经常需要自定义HTTP客户端实例。当使用Fetch作为HTTP客户端时，一个常见需求是能够传递RequestInit参数来控制请求行为。本文将深入探讨这一需求的实现方案。

核心问题分析

Orval默认生成的API函数在使用Axios作为HTTP客户端时，会自动包含options参数来接收AxiosRequestConfig。然而当切换到Fetch实现时，默认情况下不会暴露RequestInit参数，这限制了开发者对Fetch请求的细粒度控制能力。

解决方案实现

通过自定义Fetch实例的方式可以完美解决这个问题。关键点在于：

1. 定义扩展的FetchOptions类型，包含所有必要的请求配置项
2. 实现一个包装函数来处理请求和响应
3. 确保该包装函数能接收并传递RequestInit参数

以下是经过优化的实现代码：

// 定义扩展的请求配置类型
interface EnhancedFetchOptions {
  baseURL?: string;
  headers?: Record<string, string>;
  url: string;
  method: HttpMethod;
  params?: any;
  data?: any;
  signal?: AbortSignal;
}

// 增强的响应类型
interface EnhancedFetchResponse<T = unknown> {
  data: T;
  headers: {
    authorization?: string | null;
    'x-total-count'?: string | null;
  };
}

// 请求包装函数
export const createFetchInstance = async <T>(
  config: EnhancedFetchOptions,
  init?: RequestInit
): Promise<EnhancedFetchResponse<T>> => {
  
  // 处理Content-Type头
  const headers = {
    ...config.headers,
    ...(config.headers?.['Content-Type'] === 'application/json' 
      ? { 'Content-Type': 'application/json' } 
      : {})
  };

  // 构建完整URL
  const url = new URL(
    `${config.baseURL || ''}${config.url}${
      config.params ? `?${new URLSearchParams(config.params)}` : ''
    }`
  );

  // 执行请求
  const response = await fetch(url.toString(), {
    method: config.method,
    body: config.data ? JSON.stringify(config.data) : undefined,
    headers,
    signal: config.signal,
    ...init // 合并自定义RequestInit
  });

  // 处理响应
  if (!response.ok) {
    throw {
      status: response.status,
      data: await parseResponse(response)
    };
  }

  return {
    headers: {
      authorization: response.headers.get('authorization')
    },
    data: await parseResponse<T>(response)
  };
};

// 响应体解析辅助函数
const parseResponse = async <T>(response: Response): Promise<T> => {
  const contentType = response.headers.get('content-type') || '';
  
  if (contentType.includes('application/json')) {
    return response.json();
  }
  
  if (contentType.includes('application/pdf')) {
    return response.blob() as Promise<T>;
  }
  
  return response.text() as Promise<T>;
};

使用效果

配置Orval使用上述自定义Fetch实例后，生成的API函数将自动包含options参数：

// 生成的API函数示例
export const getUserProfile = (
  params: GetUserParams,
  options?: RequestInit
) => {
  return createFetchInstance<UserProfile>(
    { url: '/user', method: 'GET', params },
    options
  );
};

最佳实践建议

1. 类型安全：建议为不同的API端点定义精确的请求和响应类型
2. 错误处理：在自定义实例中添加统一的错误处理逻辑
3. 拦截器：可扩展实例以支持请求/响应拦截功能
4. 缓存控制：利用RequestInit实现灵活的缓存策略

通过这种方式，开发者既能享受Orval自动生成API代码的便利，又能保持对Fetch请求的完全控制权，实现高度定制化的HTTP通信方案。