需求

每次接口定义完成之后都要手动声明Ts类型和请求函数
每次接口变更之后都得重复手动声明Ts类型和请求函数
于是就有了 @clean-js/api-gen
根据yapi，swagger2，swagger3自动生产请求函数和代码，释放生产力，让你有更多的时间摸鱼

👉文档看这里
 👉生成的代码Demo看这里

install

npm install @clean-js/api-gen

功能

根据YAPI，swagger2，swagger3等api协议自动生成请求代码
声明完整的Typescript入参和出参类型
支持路径参数替换
记录每一次文档变更,详细功能可以看这里
YAPI会在注释中写入该接口的地址

方法命名规则为 method+url；如/user，method：post，生成的代码如下

    /** Yapi link: https://yapi.xxxx.com/project/2055/interface/api/125352 */
export function postUser(parameter: { body: PostUserBody }) {
  return Req.request<ResponsePostUser>({
    url: '/user',
    method: 'post',
    data: parameter.body,
  });
}

axios 生成代码如下,支持透传AxiosRequestConfig，灵活调用函数

export function postDatasetVersionRecords(
  parameter: {
    body: any;
    path: {
      version: string;
      dataset: string;
    };
  },
  config?: AxiosRequestConfig,
) {
  return Req.request<ResponsePostDatasetVersionRecords>({
    url: replaceUrlPath('/{dataset}/{version}/records', parameter?.path),
    method: 'post',
    data: parameter.body,
    ...config,
  });
}

config

interface

export interface Config {
  url: string; // http或者文件绝对路径
  outDir?: string; // 输出文件路径，默认为./clean-js
  type?: "umi3" | "axios"; // 生成的代码类型，umi3是基于umi-request请求库,  默认为 axios
}

新建clean.config.ts

export default {
  url: 'https://petstore3.swagger.io/api/v3/openapi.json', // swagger 3
  url: 'https://petstore.swagger.io/v2/swagger.json', // swagger 2
  url: 'http://yapi.smart-xwork.cn/api/open/plugin/export-full?type=json&pid=186904&status=all&token=59ecff7d43926c3be48f893deba401407f0d819c6c24a99b307a78c0877bc7d2' // yapi
}

YAPI

项目->设置->生成 ts services
复制remoteUrl地址
在clean.config.ts文件中填入url地址
运行npm run api-gen

Swagger

复制swagger json在线地址，或者本地文件绝对地址（相对地址）
在clean.config.ts文件中填入url地址
运行npm run api-gen

运行时

在代码运行时设置请求实例

import { Req } from '@/clean-js/http.service';
function initCleanJsApi() {
  Req.set(request);
}

Diff功能

当文档发送变化，重新运行api-gen会生成diff记录,格式如下，记录新增，减少，变更多少api

Date: 2022-11-26 12:26:34

Sum-up: Added 20 APIs Reduce 3 APIs

接下来用YAPI在线文档演示一下，除了用YAPI，使用swagger2/3也都一样可以diff

目前有两个接口

运行api-gen,生成的代码如下

接下来我们新增一个接口,重新运行api-gen

在控制台会提示你有部分APIs发生了改变

之后会生成一个log文件夹，里面按照日期生成log，具体内如下，新增一个接口， method为GET，path 为/api/jym/test

同理，删除变更也会记录。对比的都是上一次的文档

接下来我们试试变更接口文档，这个是原来的/api/user/{id}接口返回的字段

我们修改第一个field_1为jym 然后重新运行api-gen，log日志会把变更的接口以及变更前后的json都记录下来
Parameters Change in response get /api/user/{id}

这样我们就可以知道哪些接口发生了变化，建议在开发环境每次启动的时候都运行一次api-gen，这样可以保证文档生成的代码是最新的

贴上源码 👉🏻 @clean-js/api-gen

期待宝子们的star⭐️，你的支持就是我最大的动力

释放生产力 | Yapi，swagger2，swagger3生成请求代码

需求

install

功能

config

YAPI

Swagger

运行时

Diff功能