需求

每次接口定义完成之后都要手动声明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

1. 项目->设置->生成 ts services

   

2. 仿制remoteUrl地址
3. 在clean.config.ts文件中填入url地址
4. 运转npm run api-gen

Swagger

1. 仿制swagger json在线地址，或许本地文件肯定地址（相对地址）
2. 在clean.config.ts文件中填入url地址
3. 运转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⭐️，你的支持就是我最大的动力

---

其他文章
什么？在React中也能够运用vue响应式状态办理
clean-js | 自从写了这个辅佐库，我已经好久没有加过班了…
clean-js | 在hooks的时代下，运用class办理你的状态
clean-js | 手把手教你写一个羊了个羊麻将版
写给前端的数据库入门 | 序
写给前端的数据库入门 | docker & 数据库
有没有一种或许，你历来都没有真正了解async
三分钟实现前端写JAVA这件事——装环境
三分钟实现前端写JAVA这件事——VS code