在前端开发中，经常会用到 Swagger 的文档描述，以及使用 Swagger 维护的 API 列表。在编写接口代码时，需要将 Swagger 中的接口信息转换成对应的代码结构。对于这种需求，可以使用 think-swagger-parser 这个 npm 包，进行快速解析。
安装和使用
使用 NPM 进行安装
npm install think-swagger-parser --save-dev
导入并使用
-- -------------------- ---- ------- ----- ------------- - -------------------------------- ----- ---------- - --------------------------------------------- ----- ------- - - ---------- ----------- -- -- ----------- ---------------------- -- --- ------------ ----------------------------- -- -- ----------- ----- -- ---- -- ----- ------- - ----- -------------------------------- ----- --------- - ------------------------------- --------- -----------------------
上述代码中，
swaggerUrl是 Swagger 的文档地址，options则是解析配置项，包含了类名、方法名、包名、返回类型等信息。swaggerParser.parse方法用于解析 Swagger 文档并返回解析结果对象，swaggerParser.generate方法用于根据解析结果对象和配置项生成代码。
解析结果对象
解析 Swagger 文档后，返回的解析结果对象中包含了所有的 API 接口信息。例如，可以通过以下代码查看接口信息：
const swaggerUrl = 'http://petstore.swagger.io/v2/swagger.json'; const swagger = await swaggerParser.parse(swaggerUrl); console.log(swagger);
解析结果对象中的属性说明如下：
basePath: API 的基础路径host: API 的主机名swagger: Swagger 版本号tags: 标签列表schemes: 传输方案paths: 所有路径和其中的方法
解析 Swagger 对象
在解析完 Swagger 文档后，think-swagger-parser 会将 Swagger 对象转换成以下结构：
-- -------------------- ---- -------
----- ------- - -
--------- ---
----- ---
-------- ---
-------- ---
----- ---
------ -
------- -
----- -
------------ ---
-------- ---
----------- ---
---------- -
---- -
------------ --
-
-
-
-
-
--其中，tags 数组中包含了所有的标签信息，包括标签名称、描述等；paths 对象以接口的路径为键值，每个键位对应一个对象，对象中包含了接口的相关信息。例如 '/pet' 对应的接口信息如下：
-- -------------------- ---- -------
-
----- -
------------ ---
-------- ---
----------- ---
---------- -
---- -
------------ --
-
-
-
-解析结果对象中，便可以得到 Swagger 文档中所有的接口信息，既方便了开发者们查看 Swagger 的文档以及 API 维护者进行沟通，也方便了开发者们在编码时，直接使用它生成相应的代码，避免了很多不必要的麻烦。
代码生成
生成代码时，可以使用 think-swagger-parser 中的 generateClassFromSwagger 方法，它接收两个参数：Swagger 对象和代码生成配置项。
代码生成配置项包括以下几个属性：
className: 类名packageName: 包名methodName: 方法名returnType: 返回类型
例如，代码生成配置项如下：
const options = {
className: 'PetStore',
methodName: 'petpetiduploadImage',
packageName: 'com.tgfcoder.thinkpetstore',
returnType: 'Pet'
};生成的代码如下：
-- -------------------- ---- -------
---
- -------------- ---- -- --------------------
--
------- ---------------------------
------ --------------------
------ ------------------
------ ---------------
------ --------------
------ ----------------------
------ --------------------
------ ---------------
------ --------------------
------ ----------------------
------ -------------------
------ ----------------------
------ --------------------
------ --------------------
------ -------------------------
------ -----------------------
------ -------------------------
------ -----------------------
------ ---------------------
------ --------------------
------ -------------------
------ --------------------
------ --------------------
------ ---------------------
------ --------- -------- -
---
- ---- ------------------------
- ------- - --- -- --- ----- ---- ---- ----
-
- ------ ----- -- -- --- -- ------
- ------ ------------------ ---------- ---- -- ---- -- ------
- ------ ---- ---- -- ------
--
--------------------------------
----------
--------- --------------------
-------------- ---- ------
--------------------------- ----------- -------------------
----- ------------------ ----
--
-上述代码可以直接使用，省去了很多手写代码的麻烦。只需要将自己的配置项传入即可，大幅提升了代码的可读性和开发效率。
总结
本文介绍了 think-swagger-parser 这个 npm 包的使用教程，包括了安装、解析 Swagger 对象、代码生成等方面。使用 think-swagger-parser 可以极大地提升代码生成的效率和可读性，让开发者们可以更加专注于业务逻辑的开发，而非冗杂的代码编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601e81e8991b448de496