为了偷懒，咱们作了Yapi生成Typescript接口请求工具

在使用swagger时：

我：“接口文档啥时候能给到？我页面写好了，就差接口对接，明天都明天提测了~~”

后端：“咱们用的swagger，须要我先把接口写完才能给你”

我：“😭”

使用yapi以后：

后端：“我接口写完了，啥时候来联调？”

我：“我已经对接完丢test了，你上test环境看看就行🐶”

​ 最近为了走协议先行的开发模式，加快开发效率。后端的API文档从swagger迁移到yapi，因此抛弃了以前一直使用的Pont。由于懒得每次都手写接口请求方法和接口的声明文件🐶，实现了从Yapi中生成Typescript的全局包工具。同时提供了vscode插件版本。

总体思路

​ 要实现接口自动生成，首先咱们须要肯定一个最小的生成细粒度，例如是支持当个接口的生成？仍是当个分类的生成？这里我按照分组、项目、模块 对Yapi进行了3层的划分，而后肯定最小细粒度到模块那个层面。由于咱们在项目开发时，通常一个迭代会有多个接口，因此若是细粒度到接口层面其实非必要并且操做也会更加繁琐。

想要实现的功能

1. 根据权限拉取Yapi接口列表

2. 自动生成声明文件

3. 声明能够方便的在项目中使用

4. 自动生成接口请求文件

5. 方便的使用mock

6. 方便的进行接口diff对比

主要流程

鉴权

​ 拉取Yapi接口时，咱们须要经过Token或者帐号密码来进行鉴权，这里我选择的是帐号密码。为何使用帐号密码登陆，为何不用token？在Yapi中有提供Token的机制，让咱们能够方便的拉取到某个API项目中的全部接口。可是这里有个局限，咱们一个工程中可能须要用到多个API项目，并且基于权限考虑可能不会把Token给到全部人。因此这里我采用了帐号密码登陆，这样能够实现一套帐号密码运用于不一样的项目，同时也可以适配Yapi中的权限管理。

多API服务支持

​ 在如今微服务盛行的环境下，一个前端项目同时调用多个Api域名是很常见的事情了。因此在配置时经过projectMapping这个字段来根据不一样的项目Id来区分不一样的请求方法，示范的配置以下，具体能够查看底部的详细配置

projectMapping: {
    ProjectId: {
      // 请求方法名
      exportName: 'Api',
      // 返回报文泛式
      wrapper: '{ code: string, message: string, data: T }',
    },
 }
复制代码

Mock

​ 由于Yapi中已经集成了Mock，因此在这里咱们须要充分的利用起来🐶当需求开发时，只须要将请求的URL改写到对应Mock地址就好了

​ 在生成的接口请求方法中，最后一位参数为isMock。当后端接口没出时，直接传入true既可开启mock

Diff

​ 这个功能实际上是从Pont来的灵感。当接口变动时，若是后端没有通知到位的话，其实咱们并不知道接口变动了。那么就会有存在请求时入参出参错误的问题。因此在实现工具时，在生成代码的时候记录了下每一个接口的最后修改时间，经过最后更新时间判断接口是否变动。能够方便的定位到有接口变动的模块，快速生成

使用说明

Y2T提供了2种使用形式：

1. 全局包：使用npm install -g y2t全局安装便可

2. vscode插件：在插件市场搜索y2t，安装便可

   这里更推荐使用vscode插件，由于能够跟着插件版本号升级自动升级，而不须要每次更新后从新安装全局包

全局包使用方式

使用说明

// 生成默认配置
$ y2t -i
// 根据项目修改配置后
$ y2t -g
复制代码

完整功能列表

$ y2t --help
Options:
  -v, --version   获取当前版本
  -i, --init      初始化配置文件
  -g, --generate  生成接口文档
  -r, --remove    移除缓存
  -d, --diff      当前项目Diff
复制代码

• -v, --version：获取包的版本号
• -i, --init：初始化配置文件，会放在项目当前执行目录下的ygt.config.js
• -g, --generate：根据配置生成接口文件，当没有配置时会初始化默认配置
• -r, --remove：根据移除本地缓存，主要用于当本地文件变动时，diff失败时重置
• -d, --diff：根据本地缓存进行接口对比，获取更新的模块

vscode插件使用方式

功能入口

插件安装完成后，会在 Vs Code 底部工具栏新增Work、Y2T、Y2T-DIFF按钮

工做区划分 Work

考虑到各人开发习惯不一样，当使用多工做区开发时能够经过Work选择你须要生成的工做区

生成配置文件

首次打开工具栏中的Y2T按钮会提示没有配置文件，能够选择默认生成，会在项目中生成ygt.config.js文件

接口生成 Y2T

配置好ygt.config.js后，再次点击Y2T按钮。顶部会出现弹窗以此选择须要生成的分组，项目，模块既可。

接口对比 Y2T-DIFF

生成 api 完毕后y2t会在vscode中基于workspace储存缓存, 点击Y2T-DIFF按钮，弹出检测API是否更新与清除API工做区缓存

``检测API是否更新`：能够进行检测 api 接口是否有更新, 若是有的话会进行询问，按照我的需求选择更新与否

清除API工做区缓存：则能够进行清除缓存，主要用于本地缓存紊乱时的状态恢复

详细配置

示范配置：

module.exports = {
  // 帐号
  account: 'xxxxx@xxx.cn',
  // 密码
  password: 'xxxxx',
  // Yapi网址连接
  originUrl: 'https://yapi.xxx.cn/',
  // 请求声明模块
  fetchModule: 'import { AxiosPromise as RequestPromise , AxiosRequestConfig as RequestConfig } from "axios";',
  // 输出目录
  outDir: './src/apis',
  // 项目跟请求方法映射
  projectMapping: {
    537: {
      exportName: 'crmApi',
      // 返回报文泛式
      wrapper: '{ code: string, message: string, data: T }',
    },
  },
  // 请求体实例文件路径
  requestFilePath: 'src/utils/http',
  // 忽略ts校验
  tsIgnore: true,
  // 忽略eslint
  esLintIgnore: true
};
复制代码

配置具体说明

• account：帐号，这里不使用yapi的token主要有两个缘由：
  1. 为了可以根据帐号进行yapi的权限区分
  2. token只能获取到项目级别，没法进行分组级别的筛选
• password：密码
• originUrl：Yapi 网址地址
• outDir：输出目录，相对于当前工做区的根目录
• fetchModule：请求方法声明模块，这里主要是防止对axios进行了二次封装的场景下能够正肯定义
• projectMapping：项目映射。在微服务盛行的如今一个工程中可能会有多个 api 地址，因此这里按照项目id进行了请求方法映射。
  • projectId：项目 ID，例如url:xxx.xxx.com/project/216…
  • exportName：请求方法名称，为了兼容不一样的请求库，因此生成的代码中不会直接生成 ajax 请求方法，须要外部传入，这里的exportName通常就是你配置好了的axios实例
  • wrapper：默认的返回体，若是接口有默认的返回包体时，能够经过wrapper定义 response，其中T表明返回的具体 data
• requestFilePath：请求方法的文件路径，也就是封装axios请求方法的文件路径，这里最好使用@别名或者src等相对路径
• tsIgnore：是否开启tslint忽略
• esLintIgnore：是否开启esLintIgnore忽略

项目地址

最后附上项目地址：github.com/SewerKing/y…