共计 2346 个字符，预计需要花费 6 分钟才能阅读完成。
在工作中，我们的前端工作流一般开始于前后端协商好 Api 文档之后，再针对这个 Api 文档做 mock 模拟数据，然后用做好的 mock 进行开发，后端开发完毕之后再改一下 API 数据的 BaseURL 切换到正式 API 进行联调；如下
本文介绍的一个工具 (或者说方法)，来将这个工作流优化一下，也是我平时工作正在用的方法，当做自己的笔记，也跟大家一起分享一下~
这个方法的主要思路就是开发人员在某个 api 工具中按要求填好文档，然后导出 swagger.json 配置文件，再把这个配置文件导入到 easy-mock 中，再用工具自动生成前端 api 的 js 文件以供调用。
本文中所使用的工具：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 文件了~
网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~
参考：
用 swagger.json 自动生成 axios api 访问代码 – 简书
Easy-mock-cli/README.md
推介阅读：
windows 本地安装部署 Easy Mock – 掘金
