如何在 React 中使用生成的 OpenAPI 客户端？

Question

我已经生成了我的 API 客户端openapi-generator-cli generate -i https://linktomybackendswagger/swagger.json -g typescript-axios -o src/components/api --additional-properties=supportsES6=true

现在我的项目中有所有文件，但我不知道如何实现它。如何实例化 API？在哪里配置要使用的访问令牌？我如何知道端点的每个方法名称？

经过两个小时的谷歌搜索后，我似乎找不到关于最基本的设置问题的文档。也许我只是找错了地方。有人能指出我正确的方向吗？

Answer 1

好的，所以我想出了一种我认为很干净的方法，我将在这里为其他走相同路径的人记录，即：

• 使用正在使用的 APIAuthorization: Bearer <Token here>
• openapi-generator-cli使用创建客户端-g typescript-axios
• 使用OAS3

假设您有一个名为 的端点UserPolicies。通过 CLI 生成代码后，每个端点将在生成的文件中拥有自己的类，api.ts其名称扩展如下UserPoliciesApi。

要使用该端点，需要进行以下设置。

示例： 内部UserPolicyList.tsx：

import { UserPoliciesApi } from './components/api/api';
import { Configuration } from './components/api/configuration';

const openapiConfig = new Configuration();
  openapiConfig.baseOptions = {
    headers: { Authorization: 'Bearer ' + cookies.access_token },
  };
const openapi = new UserPoliciesApi(openapiConfig);

假设您想要进行 GET 调用，api/Policies可以使用以下命令来执行此操作：

openapi.userPoliciesGetPolicies.then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
});

现在，我发现这种设计的不便之处在于进行一个简单的 api 调用所需的样板代码。我希望能够简单地进行一次导入并已经完成设置access_token。

所以我创建了一个像这样的包装类MyApi.tsx：

import { Cookies } from 'react-cookie';
import { Configuration } from './components/api/configuration';

class MyApi {
  private cookies: Cookies;

  constructor() {
    this.cookies = new Cookies();
  }

  private accessToken = () => {
    return this.cookies.get('access_token');
  };

  private configuration = () => {
    const openapiConfig = new Configuration();
    openapiConfig.baseOptions = {
      headers: { Authorization: 'Bearer ' + this.accessToken() },
    };
    return openapiConfig;
  };

  public userPoliciesApi = () => {
    const api = new UserPoliciesApi(this.configuration());
    return api;
  };
}

export default MyApi.tsx;

现在，您可以轻松地替换样板并使用以下命令进行调用：

里面UserPolicyList.tsx：

import { MyApi } from './components/myapi/MyApi.tsx';

const api = new MyApi();
const userPoliciesApi = api.userPoliciesApi();

userPoliciesApi.userPoliciesGetPolicies.then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
});