在前端开发中，我们常常需要和后端 API 进行交互，而 Swagger 是一种常见的 API 描述语言和框架。当我们需要使用 Swagger 来生成前端代码时，fork-swagger-js-codegen-with-responsetypes 这个 npm 包就派上用场了。
什么是 fork-swagger-js-codegen-with-responsetypes？
fork-swagger-js-codegen-with-responsetypes 是 Swagger 代码生成器的一个 fork 版本，它通过扩展原版代码生成器，使其在生成代码时能够包含 API 响应类型信息，方便我们进行类型转换操作。同时，该版本也修复了原版代码生成器的一些 bug。该工具是在原版代码生成器的基础上开发的，并加入 npm packages 和参数注释，可以方便地使用。
安装和使用
安装
在使用 fork-swagger-js-codegen-with-responsetypes 之前，我们需要先安装它。在 npm 中运行以下命令：
npm install -g fork-swagger-js-codegen-with-responsetypes
使用
安装完成之后，我们就可以使用该生成器生成前端代码了。以下是生成的命令示例：
swagger-js-codegen-with-responsetypes <url-to-your-swagger-json/multiple,yaml> [options]
其中，<url-to-your-swagger-json/multiple,yaml> 指的是 Swagger API 文档的地址。而 [options] 则是可选项参数。
接下来，我们将列出一些常用的生成器选项。
--output
使用 --output 参数可以指定生成的文件名。例如：
swagger-js-codegen-with-responsetypes http://example.com/swagger.json --output client.js
--target
使用 --target 参数可以指定生成的代码目标类型。该参数有以下选项：node, angular, react 和 vue。由于我们是在前端工程中使用该工具，因此要使用的选项为 angular、react 或 vue。例如：
swagger-js-codegen-with-responsetypes http://example.com/swagger.json --output client.js --target vue
--model-property-oas-compliant
使用 --model-property-oas-compliant 参数可以开启 OAS 兼容模式。在这种模式下，对于任何具有非法属性名称的模型属性名称，该生成器将在生成的代码中替换它们。例如：
swagger-js-codegen-with-responsetypes http://example.com/swagger.json --output client.js --model-property-oas-compliant
--model-property-typescript-mode
使用 --model-property-typescript-mode 参数可以开启 TypeScript 模式。在这种模式下，该生成器将生成支持 TypeScript 的代码，更加方便前端开发人员进行开发和调试。
swagger-js-codegen-with-responsetypes http://example.com/swagger.json --output client.ts --target react --model-property-typescript-mode
--emit-model-metadata
使用 --emit-model-metadata 参数可以开启元数据模式。在这种模式下，该生成器会在生成的代码中嵌入额外的元数据属性用于后续处理。
swagger-js-codegen-with-responsetypes http://example.com/swagger.json --output client.js --emit-model-metadata
示例代码
下面是一个简单的示例代码，用于演示如何使用 fork-swagger-js-codegen-with-responsetypes。该示例代码包含了一个 Angular 服务，它使用了该生成器生成的 client.js。
-- -------------------- ---- -------
-- ------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -------
-- --------- ------
------ - --------- - ---- --------------
-------------
----------- ------
--
------ ----- ---------- -
-- ------ -------- ----- ------- --- ----
------- ------- ----------
------------------- ----- ----------- -
-- --------- --- ------ -- --- --------- ---- ------
----------- - --- ----------- ----------- ---- ---
-
-- ------- --- ------ ---- ------- - ---- -- -----
------ ----------- --------------- -
------ ----------------------------
--------- -- --------------- -- --
--- -----
----- -------
------ -------
-----
-
-如上所示，我们只需要先引入前端依赖，然后通过 import { ApiClient } from './client.js' 引入生成器生成的代码即可。通过调用相应的 API 方法，并对响应进行处理即可完成 API 调用。
总结
fork-swagger-js-codegen-with-responsetypes 是一个非常有用的 npm 工具，它能够帮助我们生成前端调用后端 API 的代码，而且还支持包含 API 响应类型信息。在实际开发中，该工具可以大大提高开发效率和代码质量。本文中我们详细介绍了该工具的安装、使用方法和常用选项参数，并附有示例代码实现。希望大家能够充分利用该工具，帮助我们更快更好地完成前端开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cd881e8991b448da777