使用API自動生成工具優化前端工作流

在工作中，我們的前端工作流一般開始於前後端協商好Api文檔之後，再針對這個Api文檔做mock模擬數據，然後用做好的mock進行開發，後端開發完畢之後再改一下API數據的BaseURL切換到正式API進行聯調；這個方法的主要思路就是開發人員在某個api工具中按要求填好文檔，然後導出swagger.json配置文件，再把這個配置文件導入到easy-mock中，再用工具自動生成前端api的js文件以供調用。

1. 使用Api管理平臺導出swagger.json文件

一般我們前後端通過各種平臺或者工具來管理Api，比如免費的可視化Api管理平臺 sosoApi、Yapi等，一般來說這些工具都可以生成swagger.json的Api，我們可以用它來直接生成一個漂亮的可視化Api文檔，也可以用它來作為配置文件導入其他工具中，比如Easy-mock；

2. 使用swagger.json導入easy-mock

Mock平臺我們可以使用Easy-mock，輕量又簡潔，雖然沒有Api的分組功能，但平時應付應付不太大的應用、個人應用等場景足夠了；Easy-mock官網的服務被不少人直接拿到開發環境用，經常被擠爆，這個情況可以用本地部署來解決這個問題，我們將Api管理平臺中導出的swagger.json文件在新建project的時候導入，這樣剛剛Api平臺中配置的Api就被同步到我們的Easy-mock配置中，easy-mock項目面板上面會有個 Project ID。

3. 使用easy-mock-cli生成js格式Api

有了easy-mock之後一般情況下我們要寫前端的api文件了，一般api工具用axios，這裡提供一個封裝：

我們可以用easy-mock-cli來生成api，模板文件如果不想用原來的模板的話，可以使用我fork之後改寫的一個模板easy-mock-api-template，生成的Api文件是這樣的：

然後在文件中就可以：

import * as Api from 'api/index.js';

Api.activitySubmit({ activityId: 2 }) // 調用

.then(...)

簡單介紹一下配置文件，更復雜的配置要參考原來的文檔；

然後npm run create-api就可以在根目錄下生成一個api/index.js文件。