Fetch

与使用 Axios 相比，fetch API 具有减少应用程序包大小的优势。它还可以在服务器端框架和边缘计算运行时（如 Cloudflare、Vercel Edge 和 Deno）中充当 http 客户端。

您应该有一个 OpenAPI 规范和一个 Orval 配置，其中您将模式定义为 fetch。

使用 fetch 的示例

1import { defineConfig } from 'orval';
2
3export default defineConfig({
4  petstore: {
5    output: {
6      mode: 'tags-split',
7      target: 'app/gen/petstore.ts',
8      schemas: 'app/gen/models',
9      client: 'fetch',
10      baseUrl: 'http://localhost:3000',
11      mock: true,
12    },
13    input: {
14      target: './petstore.yaml',
15    },
16  },
17});

查看 orval 配置 参考以了解所有可用选项。 就像来自这个 OpenAPI 规范 的以下示例：

1/**
2 * @summary List all pets
3 */
4export type listPetsResponse = {
5  data: Pets;
6  status: number;
7};
8
9export const getListPetsUrl = (params?: ListPetsParams) => {
10  const normalizedParams = new URLSearchParams();
11
12  Object.entries(params || {}).forEach(([key, value]) => {
13    if (value === null) {
14      normalizedParams.append(key, 'null');
15    } else if (value !== undefined) {
16      normalizedParams.append(key, value.toString());
17    }
18  });
19
20  return `http://localhost:3000/pets?${normalizedParams.toString()}`;
21};
22
23export const listPets = async (
24  params?: ListPetsParams,
25  options?: RequestInit,
26): Promise<listPetsResponse> => {
27  const res = await fetch(getListPetsUrl(params), {
28    ...options,
29    method: 'GET',
30  });
31  const data = await res.json();
32
33  return { status: res.status, data };
34};

fetch 客户端将为您的 OpenAPI 规范中的每个路径生成一个实现文件，包含以下内容：

1. fetch 函数的响应类型
2. 生成包含查询参数和路径参数的请求 URL 的函数
3. 调用 fetch API 的函数。

查看 这里 的完整示例

自定义函数

您可以在配置中添加自定义 fetch 函数。

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        mutator: {
7          path: './custom-fetch.ts',
8          name: 'customFetch',
9        },
10      },
11    }
12    ...
13  },
14};

然后，您准备像 示例实现 一样 然后，您可以生成一个调用 customFetch 函数的 fetch 客户端，如下所示：

1export const listPets = async (
2  params?: ListPetsParams,
3  options?: RequestInit,
4): Promise<listPetsResponse> => {
5  return customFetch<Promise<listPetsResponse>>(getListPetsUrl(params), {
6    ...options,
7    method: 'GET',
8  });
9};