使用您自己的基础 URL

Orval 允许您为每个 OpenAPI 规范设置自定义基础 URL。这可以是规范中省略的 URL 部分或整个 URL。您还可以配置 Orval 读取规范中的 servers 字段。

1module.exports = {
2  petstore: {
3    output: {
4      target: 'src/petstore.ts',
5      baseUrl: '/api/v2',
6      // baseUrl: 'https://petstore.swagger.io/v2',
7    },
8  },
9};

使用 OpenAPI 规范中的 URL

如果您想使用规范中定义的 URL（由 servers 字段描述），可以将 getBaseUrlFromSpecification 设置为 true，这将使 Orval 正确识别每个操作使用的基础 URL。在 输出配置 中了解更多关于不同设置的信息。

1module.exports = {
2  petstore: {
3    output: {
4      target: 'src/petstore.ts',
5      baseUrl: {
6        getBaseUrlFromSpecification: true,
7        variables: {
8          environment: 'api.dev',
9        },
10      },
11    },
12  },
13};

也可以在您的 HTTP 客户端上直接配置基础 URL。

Axios

您可以为所有请求设置默认的 baseUrl：

axios.defaults.baseURL = '<BACKEND URL>'; // 在此处使用您自己的 URL 或环境变量

您也可以使用拦截器来实现：

1axios.interceptors.request.use((config) => {
2  return {
3    ...config,
4    baseURL: '<BACKEND URL>', // 在此处使用您自己的 URL 或环境变量
5  };
6});

还可以创建自定义的 axios 实例。查看 完整指南 了解更多详情。

const AXIOS_INSTANCE = axios.create({ baseURL: '<BACKEND URL>' }); // 在此处使用您自己的 URL 或环境变量

Fetch 客户端

另外，如果您使用 fetch 客户端，仍然可以通过自定义 fetch 客户端设置请求 URL。

1const getUrl = (contextUrl: string): string => {
2  const url = new URL(contextUrl);
3  const pathname = url.pathname;
4  const search = url.search;
5  const baseUrl =
6    process.env.NODE_ENV === 'production'
7      ? 'productionBaseUrl'
8      : 'http://localhost:3000';
9
10  const requestUrl = new URL(`${baseUrl}${pathname}${search}`);
11
12  return requestUrl.toString();
13};
14
15export const customFetch = async <T>(
16  url: string,
17  options: RequestInit,
18): Promise<T> => {
19  const requestUrl = getUrl(url);
20  const requestInit: RequestInit = {
21    ...options,
22  };
23
24  const request = new Request(requestUrl, requestInit);
25  const response = await fetch(request);
26  const data = await getBody<T>(response);
27
28  return { status: response.status, data } as T;
29};

请参考完整示例 这里

Angular HTTP 客户端

您可以使用拦截器自动添加 API 的 URL。就像添加授权头一样。

1import { Injectable } from '@angular/core';
2import {
3  HttpEvent,
4  HttpInterceptor,
5  HttpHandler,
6  HttpRequest,
7} from '@angular/common/http';
8import { Observable } from 'rxjs/Observable';
9
10@Injectable()
11export class APIInterceptor implements HttpInterceptor {
12  intercept(
13    req: HttpRequest<any>,
14    next: HttpHandler,
15  ): Observable<HttpEvent<any>> {
16    const apiReq = req.clone({ url: `<BACKEND URL>/${req.url}` });
17    return next.handle(apiReq);
18  }
19}

还要记住在模块的提供者中添加拦截器。

1providers: [
2  {
3    provide: HTTP_INTERCEPTORS,
4    useClass: APIInterceptor,
5    multi: true,
6  },
7];

其他客户端

根据您使用的客户端，您需要自己添加它