关于前端:释放生产力-Yapiswagger2swagger3生成请求代码

需要

每次接口定义实现之后都要手动申明 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.onewo.com/project/2055/interface/api/125352 */
  export function postUser(parameter: { body: PostUserBody}) {
    return Req.request<ResponsePostUser>({
      url: '/user',
      method: 'post',
      data: parameter.body,
    });
  }

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);
}

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

期待宝子们的 star⭐️，你的反对就是我最大的能源