使用API自動生成工具優化前端工作流
在工作中，我們的前端工作流一般開始於前後端協商好Api文件之後，再針對這個Api文件做mock模擬資料，然後用做好的mock進行開發，後端開發完畢之後再改一下API資料的BaseURL切換到正式API進行聯調；如下
本文介紹的一個工具(或者說方法)，來將這個工作流優化一下，也是我平時工作正在用的方法，當做自己的筆記，也跟大家一起分享一下~
這個方法的主要思路就是開發人員在某個api工具中按要求填好文件，然後匯出swagger.json配置檔案，再把這個配置檔案匯入到easy-mock中，再用工具自動生成前端api的js檔案以供呼叫。
本文中所使用的工具： ofollow,noindex" target="_blank">sosoApi 、 Easy-mock 、 Swagger 、 Easy-mock-api-template 、 axios
1. 使用Api管理平臺匯出swagger.json檔案
一般我們前後端通過各種平臺或者工具來管理Api，比如免費的視覺化Api管理平臺 sosoApi 、 Yapi 等，一般來說這些工具都可以生成 swagger.json 的Api，我們可以用它來直接生成一個漂亮的 視覺化Api文件 ，也可以用它來作為配置檔案匯入其他工具中，比如Easy-mock；
比如在sosoApi中就可以匯出為swagger文件( swagger.json )：
我們先匯出一個 swagger.json 備用；
2. 使用swagger.json匯入easy-mock
Mock平臺我們可以使用Easy-mock，輕量又簡潔，雖然沒有Api的分組功能，但平時應付應付不太大的應用、個人應用等場景足夠了；Easy-mock官網的服務被不少人直接拿到開發環境用，經常被擠爆，這個情況可以用本地部署來解決這個問題，參考 windows本地安裝部署 Easy Mock 。
我們將Api管理平臺中匯出的 swagger.json 檔案在新建project的時候匯入：
這樣剛剛Api平臺中配置的Api就被同步到我們的Easy-mock配置中了，比如sosoApi的示例 專案 匯出的結果就是：
這時我們就可以用它來進行資料mock了，怎麼樣，是不是很輕鬆~
easy-mock專案面板上面會有個 Project ID，這個記下來後面要用；
3. 使用easy-mock-cli生成js格式Api
有了easy-mock之後一般情況下我們要寫前端的api檔案了，一般api工具用axios，這裡提供一個封裝：
// utils/fetch.js
import axios from 'axios'
const service = axios.create({
baseURL: 'https://easy-mock.com/project/5bf6a23c92b5d9334494e884',
timeout: 5000
})
// request攔截器
service.interceptors.request.use( config => {...},err => {...})
// respone攔截器
service.interceptors.response.use( res => {...},err => {...})
export default service
我們可以用 easy-mock-cli 來生成api，模板檔案如果不想用 原來的模板 的話，可以使用我fork之後改寫的一個模板 easy-mock-api-template ，生成的Api檔案是這樣的：
// api/index.js
import fetch from 'utils/fetch';
/* 活動查詢 */
const activityQuery = ({ activityDate }) => fetch({
method: 'get',
url: '/activity/query',
params: { activityDate }
});
/** 活動儲存 */
const activitySave = () => fetch({
method: 'post',
url: '/activity/save'
});
/** 活動提交 */
const activitySubmit = ({ activityId, content }) => fetch({
method: 'post',
url: '/activity/submit',
data: { activityId, content }
});
export {
activityQuery,// 活動查詢
activitySave,// 活動儲存
activitySubmit// 活動提交
};
然後在檔案中就可以：
import * as Api from 'api/index.js';
// 呼叫
Api.activitySubmit({ activityId: 2 })
.then(...)
簡單介紹一下配置檔案，更復雜的配置要參考 原來的文件 ；
// .easy-mock.js 配置檔案
{
host: 'http://localhost:8080/',// easy-mock的源，沒有本地部署的話不用寫，本地部署則填本地服務地址
output: "../",// 生成 API 的基礎目錄
template: "../",// 指定模板，這裡用本地寫的模板
projects: [// 可以有多個模板來源
{
"id": "你要建立的 Easy Mock 專案的 id",// 剛剛記下來的 Project ID
"name": "api"// 生成的output目錄下的檔名
}
]
}
然後
npm run create-api
就可以在根目錄下生成一個 api/index.js 檔案了~
網上的帖子大多深淺不一，甚至有些前後矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~