在工作中，我們的前端工作流一般開始於前後端協商好Api文檔之後，再針對這個Api文檔做mock模擬數據，然後用做好的mock進行開發，後端開發完畢之後再改一下API數據的BaseURL切換到正式API進行聯調；如下
本文介紹的一個工具(或者說方法)，來將這個工作流優化一下，也是我平時工作正在用的方法，當做自己的筆記，也跟大家一起分享一下~
本文中所使用的工具：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文件了~
網上的帖子大多深淺不一，甚至有些前後矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~
參考：
推介閱讀：