简介
@4geit/rct-swagger-client-container 是一个针对 React 项目的 npm 包，它用于让前端开发人员更方便地使用 Swagger 定义的 RESTful API，从而减少代码量，并提高代码的可维护性和可读性。
它的主要特点包括：
- 支持通过 Swagger 2.0 和 OpenAPI 3.0 规范定义的 API；
- 提供了一组 React 组件，它们封装了 Swagger 客户端的接口，从而可以在 React 项目中更方便地使用；
- 提供了自动生成 TypeScript 客户端的工具，它可以将 Swagger 定义的 API 转换为 TypeScript 代码，并生成相应的 API 客户端类。
本篇文章将介绍如何在 React 项目中使用 @4geit/rct-swagger-client-container，以及如何使用自动生成 TypeScript 客户端的工具。
安装与引入
使用 npm 可以方便地安装 @4geit/rct-swagger-client-container：
npm install @4geit/rct-swagger-client-container
然后在项目中引入它：
import SwaggerClientContainer, { SwaggerClientProvider } from '@4geit/rct-swagger-client-container';基本使用方法
SwaggerClientProvider
@4geit/rct-swagger-client-container 包含两个主要的组件：SwaggerClientProvider 和 SwaggerClientContainer。
SwaggerClientProvider 是一个高阶组件，用于在应用程序的根组件中设置 Swagger 客户端实例，并为子组件提供它。它应该包裹整个应用程序树，并且可以使用一个或多个 Swagger 客户端实例。
接下来，让我们看一个例子：
-- -------------------- ---- -------
------ ----------------------- - --------------------- - ---- --------------------------------------
----- ------- - -
-------- ------
----- -
-------- --------
------ -------- ----------
------------ -- ------ --- ---- ---- - -------- -- -- ------- -- ----------- -------- -- --- ----------- --------------
--
----- ----------------------
--------- ------
-------- -
------
--
------ -
--------------- -
---- -
----- -
-----
--
-------- ----- --- -- ----
------------ -------- - ------ -----
------------ -------------
--------- -
-------------------
-----------------
--
----------- -
-
----- --------
--- -------
------------ --- -- --- -- --------
--------- -----
----- ----------
------- -------
-
--
---------- -
------ -
------------ ----------- -----------
------- -
----- -------------------
-
--
------ -
------------ -------- -- ---------
--
------ -
------------ ---- --- ------
-
-
-
-
--
------------ -
---- -
----- ---------
----------- -
--- -
----- ----------
------- -------
--
----- -
----- --------
--
---- -
----- --------
-
-
-
-
--
-------- ----- -
------ -
---------------------- ---------------
------- ---------
------------------------
--
-在上面的例子中，我们定义了一个简单的 Swagger 2.0 API 规范，并将它传递给了 SwaggerClientProvider 组件。这样做可以在后续的代码中使用 Swagger 客户端方法调用。
SwaggerClientContainer
SwaggerClientContainer 是一个包装器组件，用于渲染 Swagger 客户端的某个组件。它是通过 SwaggerClientProvider 提供的 Swagger 客户端实例来初始化的。
下面是一个使用 SwaggerClientContainer 的例子：
-- -------------------- ---- -------
------ ---------------------- ---- --------------------------------------
-------- ---------- -
----- - ---- - - ------
------ -
-----
------ ------- -------
------ --------- -------
------ -------- -------
------
--
-
-------- -------------- -
----- - ----- - - ------
------ -
----------------------- -------------------------
- -- --------- ------ ------- -- -- -
-- --------- -
------ ----------------------
- ---- -- ------- -
------ ----------- - ----- --------
- ---- -- ---------- -
----- - ---- - - ---------
------ ---- ------ ---- - ---
- ---- -
------ ------- ------------
-
--
-------------------------
--
-
-------- ----- -
------ -
---------------------- ---------------
-----
------- ---------
-------- --------- --
------
------------------------
--
-在上面的代码中，我们定义了一个 PetById 组件，它接受一个 petId 参数，并根据该参数调用 Swagger API 的 getPetById 方法。
这里我们使用了 SwaggerClientContainer 组件来渲染 getPetById 方法的返回值。SwaggerClientContainer 在组件树中找到最近的 SwaggerClientProvider，然后使用它来初始化 Swagger 客户端实例。一旦 Swagger 客户端被初始化，SwaggerClientContainer 组件可以通过 operationId 属性调用 API 的任何操作。
在 SwaggerClientContainer 内部的代码块通过一个函数用于回调，它接收三个参数：response，error 和 loading。
- 如果请求正在加载中，loading 将为 true，并且我们可以在界面上显示相应的加载提示。
- 如果请求失败，error 将包含错误的详细信息，并提示用户有关错误的信息。
- 如果请求成功，response 将包含响应的数据，并且我们可以将它们传递给其他的 React 组件来渲染。
自动生成 TypeScript 客户端
使用 @4geit/rct-swagger-client-container，我们还可以自动生成 TypeScript 客户端。
个人认为自动生成 TypeScript 客户端是 @4geit/rct-swagger-client-container 最重要的特性之一。通过自动生成 TypeScript 客户端，我们可以避免手动编写大量的 API 客户端代码，减少出错的机会，提高了代码质量。
接下来我们就来看看如何使用自动生成 TypeScript 客户端的工具。不过，在运行生成命令之前，我们需要确认我们的 Swagger 规范是否满足 TypeScript 自动生成工具的要求。具体内容可以参考官方文档。
安装代码生成器工具：
npm install swagger-typescript-generator -g
运行代码生成器：
swagger-typescript-generator --input ./petstore.yaml --output ./client.ts
在这里，--input 参数表示 Swagger 文件的路径，--output 参数表示 TypeScript 文件的输出路径。
运行完生成器后，我们可以在输出路径中找到生成的 TypeScript 客户端文件 client.ts。
文件内容如下：
-- -------------------- ---- -------
-- --------------
---
- ---- ------- --- -------- ---------- --- -------------- -- --- ------- -------- ---
- ----- ---------------------------------------------- -- ----- -----
-
- ------- --------
-
- ---- -- - ------ ------ -------- -------
- --- --- ---- --- ---- ----- ------- -- -------------------------------------- -- -- ------------------ ----------------------------------
--
------ - -- ----------- ---- ---------------
------ ----- ---- --------
------ ----- ------ -
---
- ---- --- -- --
- ----------------- ------ -- -- --- -- ------
- ------ ----- -- -- --- -- ------
--
------ ----------------- ------- --------- ----- --------- --------- ---- ----- ---- -- -
------ --- ----------------- ------- -- -
--- --- - ----------------
----- --------------- ------- - ---- - -
-----------
----
---- ----
------- ------
--
--
------------------------------------- -- -
------------------ ----- ----------------
---------------- -- -
--------------
---
---
-
-我们可以将其导入到我们的 React 项目中，从而使用自动生成的 TypeScript 客户端代码。
总结
通过本文的介绍，我们了解了如何在 React 项目中使用 @4geit/rct-swagger-client-container 包，以及如何使用它来调用 Swagger 定义的 RESTful API。同时，我们也了解了如何使用自动生成 TypeScript 客户端的工具，从而减少编写大量 API 客户端代码的工作量，提高代码的可读性和可维护性。
希望这篇教程能够对大家理解和使用 @4geit/rct-swagger-client-container 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb681e8991b448dc64d