爲了偷懶，咱們作了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…