自定义 HTTP 客户端

您可以在配置中添加一个 mutator 函数来设置您首选 HTTP 客户端的自定义实例。

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

1// custom-instance.ts
2
3const baseURL = '<BACKEND URL>'; // 在此处使用您自己的 URL 或环境变量
4
5export const customInstance = async <T>(
6  url: string,
7  {
8    method,
9    params,
10    body,
11  }: {
12    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
13    params?: any;
14    body?: BodyType<unknown>;
15    responseType?: string;
16  },
17): Promise<T> => {
18  let targetUrl = `${baseURL}${url}`;
19
20  if (params) {
21    targetUrl += '?' + new URLSearchParams(params);
22  }
23
24  const response = await fetch(targetUrl, {
25    method,
26    body,
27  });
28
29  return response.json();
30};
31
32export default customInstance;
33
34// 在某些情况下，使用 react-query 和 swr 时，您可能想要覆盖返回的错误类型，您也可以在这里这样做
35export type ErrorType<Error> = AxiosError<Error>;
36// 如果您想要包装 body 类型（可选）
37// （如果自定义实例在发送数据之前处理数据，比如改变大小写等）
38export type BodyType<BodyData> = CamelCase<BodyType>;

或者，请参考使用 Next.js 自定义 fetch 的示例应用 这里。

Angular

即使您使用 angular 客户端，您也可以在配置中添加 mutator 函数来设置您首选的 HTTP 客户端。

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        mutator: 'src/api/mutator/response-type.ts'
7      }
8    }
9    ...
10  },
11};

1// response-type.ts
2
3import { HttpClient } from '@angular/common/http';
4import { Observable } from 'rxjs';
5
6const responseType = <Result>(
7  {
8    url,
9    method,
10    params,
11    data,
12  }: {
13    url: string;
14    method: string;
15    params?: any;
16    data?: any;
17    headers?: any;
18  },
19  http: HttpClient,
20): Observable<Result> =>
21  http.request<Result>(method, url, {
22    params,
23    body: data,
24    responseType: 'json',
25  });
26
27export default responseType;

请也参考示例应用了解更多详情。

https://github.com/orval-labs/orval/tree/master/samples/angular-app