利用mock提高效率
谈到mock，就不得不讲前后端分离。理想情况下前后端不分离，由全栈的人以product和infrastructure的维度进行开发，效率是最高的。近些年来业务的复杂度越来越高，真正的全栈人才极为难招，企业只能退而求其次，对开发进行分工细化，让每个人做自己最擅长的事，前端负责UI显示和交互，后端负责业务的逻辑、性能等，从而架构上达到更高的效率。同时由于分工的细化，导致前后端的沟通成本增加，代码的控制权通常在后端，一次小的修改可能导致前后端反复沟通，降低开发效率，就产生了前后端分离的方案。前后端分离通过约定好协议，使用约定的协议进行并行开发，将沟通最后阶段放在联调，节省了大量的时间。
分离的表现主要是视图层的控制交给前端，对于一些偏应用类项目，使用ajax请求，前后端各负责自己的部分，直接达到分离状态，而一些展示类系统，受到seo和用户体验的影响，分离只能达到部分分离，如fis方案。不管是哪种状态的分离，都需要进行协议约定，以达到业务的并行开发。对于前端来说，开发的效果更多依赖于数据，想要最大程度的减少联调时间，就需要根据协议生成数据，这也就是mock的需求。
使用mock开发流程
这里借用yapi的流程图（yapi表示mock服务）：
首先，前后端进行定制接口，定制完成后各自进行开发。前端的开发者使用mock数据进行开发，开发完成后进行真实环境的联调，找出开发中的问题，再进行测试、上线等流程。
常用的mock方式
1. 代码层硬编码
直接数据写在代码中（或者独立的文件，代码中手动引入），修改代码跳过接口请求，直接使用数据。这种方式的最大问题是耦合性太强，业务代码中混杂了mock数据，每次正式提交都要保证代码数据指向是正确的，否则会产生神奇的结果。同时不是真正发出网络请求，和真实环境有差异。建议仅在没有其他方式的情况下才使用。
2. 代码中针对使用的ajax库拦截
这种方式分为拦截到本地和拦截到其他服务器。相较于硬编码，拦截式降低了mock数据和业务代码的耦合性，只需要引入拦截的代码，将请求转发至本地，至本地文件或其他服务器。这种方案的主要问题是需要针对代码使用的各种库进行定制插件，初期成本高；同时有部分的代码入侵，需要保证入库代码正确。
-
拦截至数据文件：
最典型的是Mock.js。这种方式实现了自由编写数据，灵活性比较大，而且mock的数据文件可以同步至仓库中，下次开发时。缺点是同样非网络请求，真实性不足。 -
拦截并改变请求：
这种方式之所以出现是因为服务器的URL和本机的URL规则不同，需要按照规则进行转换。这种方式与真实情况比较接近，同时产生了跨域，需要服务端提供对应的header。
3. 为所有接口统一添加前缀
这种方式在公用文件中直接添加接口前缀，依赖于特定的库功能（或者达到相同效果的代码结构）。同之前的拦截并改变请求类似，但更为简单一些，只改前缀就可以了，同样有代码入侵的问题。
4. 使用其他工具
这种方式分为两种：使用本地或软件数据和代理转发
-
使用本地或软件数据：
最常用的如：fiddler, charles, whistle等，可以将请求返回指定内容。主要问题是配置比较繁琐，所有操作都在本机，同步困难。 -
代理转发：
这种方式和真实环境极为接近，毕竟纯静态的文件，在服务端也是需要进行代理转发的。可使用的工具就比较多了，使用支持代理转发的开发工具，或者使用上面提到的工具，同样能够将数据转发出去。这种方式最大的优点是：无跨域、能发出真实请求、与业务代码完全隔离。
方案对比
对比以上几种方案，最优的选用代理转发方式，其次是代码拦截方式。拦截至数据文件有个优势就是可以将mock数据和仓库同步，但在不同分支开发时Mock数据可能会冲突。代理转发和拦截至服务器使用最方便，但它需要mockServer。只视开发情况而定。
一些mock用工具
mock的实现非常多，基本上每套完善的前端开发工具都是自带mock的机制。近几年随着nodejs的流行，前端可以非常方便的实现自己的mockServer，所以想列举出所有的还是很困难的，这里介绍一些知名字较高的工具。
1. swagger
- 地址：[https://swagger.io/]
- 介绍： 提到mock，就不得不提到swagger (https://swagger.io/)。它是一个极为流行的一个API设计开发工具，覆盖了从设计到文档到测试部署。它是这样介绍的：
Swagger is the world’s largest framework of API developer tools for the OpenAPI Specification(OAS), enabling development across the entire API lifecycle, from design and documentation, to test and deployment.
在设计RESTFUL类型的API极为有用，它没有专门提供mock服务，但可以提供mock服务的server模板代码，可根据模板自行搭建mock-server。此外，还提供相关的API的JSON结构数据，配合相应的工具来实现类似的效果。
2. Mock.js
- 地址：https://github.com/nuysoft/Mock/tree/refactoring
- 介绍：THX团队出品，本地文件编写mock数据规则，适用于代码库拦截，之前较为流行的一个方案，很多工具都集成了Mockjs语法，目前仓库已经不再更新。
3. rap2
- 地址：https://github.com/thx/rap2-delos
- 介绍：同THX团队出品，是rap0.x的升级版本，使用了nodejs和关系数据库开发，兼容mock.js语法。界面比较简洁，交互友好，支持界面式编辑API。但URL设计与原URL不同，需要使用代码库拦截方式。
4. apiary
- 地址：https://app.apiary.io/
- 介绍：这款在国外用的比较多一些，功能也是比较强大：
Apiary.io平台具有协同设计、即时API模拟、快速生成源码、自动测试和代码调试的开源设计工具，最重要的是可以在线模拟测试，因为该平台具备模拟服务器测试服务，可以把设计好的程序在线测试、验证。
5. easy-mock
- 地址：https://easy-mock.com/
- 介绍：搜车出品，rest api模拟，基于mockjs语法，能够从swagger生成简单数据。
6. yapi
- 地址：http://yapi.qunar.com/getfamiliar.html
- 介绍：这是去哪团队做的，使用了nodejs+mongodb方式开发，主要特性：
- 基于 Json5 和 Mockjs 定义接口返回数据的结构和文档，效率提升多倍
- 扁平化权限设计，即保证了大型企业级项目的管理，又保证了易用性
- 类似 postman 的接口调试
- 自动化测试, 支持对 Response 断言
- MockServer 除支持普通的随机 mock 外，还增加了 Mock 期望功能，根据设置的请求过滤规则，返回期望数据
- 支持 postman, har, swagger 数据导入
- 免费开源，内网部署，信息再也不怕泄露了
rap2和yapi的一些对比
接入mockServer
有了各种极为方便使用的mockServer，想要接入就很简单了。mockServer的一般使用规则：
- URL相同，直接代理转发即可
- URL后半部分相同，直接加上URL前缀即可
- URL规则不同，或需要身份认证，需要拦截转发
拦截式
拦截式针对的是使用一些封装过的ajax库，比如jquery、axios，或者使用fetch库。实现的方式各有不同。如果使用的是支持拦截器模式（如axios），拦截代码就比较简单了，直接在拦截器中改变URL指向即可，指向mockServer或mockjs文件。见以下代码（以下代码是摘自rap或rap2等其他库）。
function wrapAxios(axios) {
var url = ''
var oldRequest = {}
var routePassed = false
axios.interceptors.request.use(function (config) {
url = config.url
config.url = "http://" + ROOT + '/mockjsdata/' + projectId + url;
oldRequest = Object.assign({}, config)
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (res) {
return res;
}, function (error) {
return Promise.reject(error);
});
}
对于一些不支持拦截器的，或者原生的方法fetch，通过覆盖的方式实现（https://github.com/wenlonghuo/rap2-delos/blob/master/public/libs/fetch.rap.js）：
;(function (RAP, fetch) {
if (!fetch) {
console.warn('当前环境不支持 fetch')
return
}
if (!RAP) {
console.warn('请先引入 RAP 插件')
return
}
let next = fetch
let find = (settings) => {
for (let repositoryId in RAP.interfaces) {
for (let itf of RAP.interfaces[repositoryId]) {
if (itf.method.toUpperCase() === settings.method.toUpperCase() && itf.url === settings.url) {
return Object.assign({}, itf, { repositoryId })
}
}
}
}
window.fetch = function (url, settings) {
// ajax(settings)
if (typeof url === 'object') {
settings = Object.assign({ method: 'GET' }, url)
} else {
// ajax(url) ajax(url, settings)
settings = Object.assign({ method: 'GET' }, settings, { url })
}
var match = find(settings)
if (!match) return next.call(window, url, settings)
let redirect = `${RAP.protocol}://${RAP.host}/app/mock/${match.repositoryId}/${match.method}/${match.url}`
settings.credentials = 'include'
settings.method = 'GET'
settings.dataType = 'jsonp'
console.log(`Fetch ${match.method} ${match.url} => ${redirect}`)
return next.call(window, redirect, settings)
}
})(window.RAP, window.fetch)
使用这些插件的方法很简单，直接在html最后添加指向的script标签即可（部分拦截可能需要引入多个标签）。
修改全局URL式
这种情况适合mockServer请求中需要添加baseURL的类型。对于支持baseURL类型的库，设置baseURL即可。如baseURL为：
http://yapi.demo.qunar.com/mock/1304
我们业务代码中请求的api为：
/weather/api
那么我们实际请求的地址是：
http://yapi.demo.qunar.com/mock/1304/weather/api
所以我们应该这么设置（以axios为例）：
export default axios = new Axios({
baseURL: process.env.NODE_ENV === 'development' ? 'http://yapi.demo.qunar.com/mock/1304' :
})
如果是不区分环境的情况下，需要在提交前将baseURL设置为空，以免影响仓库代码。
对于不支持baseURL的库，建议封装方法，单独保存baseURL。
代理转发式
代理转发实现的前提是你使用的开发工具支持转发，如果不支持，就需要使用Fiddler、charles等工具进行规则重写。下面举一些例子：
webpack-dev-server中：
proxy: {
"/api": "http://localhost:3000"
}
proxy: {
"/api": {
target: "http://localhost:3000",
changeOrigin: true
}
}
注：changeOrigin是http-proxy设置选项，表示在请求头中将host转换为目标服务器的地址或IP，解决服务器出现请求地址找不到的问题。
nginx（应该没人用吧）：
location /api {
proxy_set_header X-Forwarded-Proto https;
proxy_set_header Host $host;
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_pass http://localhost:11011;
proxy_redirect off;
}
fiddler中在右侧的tab页中选择autoResponder标签页。编辑rule分别输入
REGEX:^https://server.example.com/(.*)
http://www.target.com:3838/$1
mock的一些问题
- mock不能替代联调。尽管mock数据再真实，也无法实现和后端接口一样的逻辑，部分逻辑检查或业务的问题只能联调才能发现。
- mock不能替代测试。mock本身是为了加快开发速度，那些对于代码质量要求比较高的项目，mock服务只能提供一些case。
总结
使用mock前提是前后端有一个明确的接口协议，利用合适的工具才能提高开发效率。强大的mock服务可以使你对开发的代码更为自信，即使没有后端，新手就可以通过mock熟悉之前的业务界面，或者查看一些表现特殊的界面，最大程度减少对后端的依赖。
上面介绍的几款mockServer有几种都是使用nodejs开发的。和其他语言开发的mock服务相比，json格式成为书写的主要格式，虽然用起来容易，但书写上并不方便（json5格式在某种程度上增强了书写体验，但相比yaml等格式还是有所不足）。同时业务情况不同，针对性的选择不同的平台，推荐使用rap2和yapi，前者界面更为简洁，操作方便，后者功能更为强大。如果有特殊的需要，可以自己写一个，顺便练练手。
搭建一个属于自己的server
参考
【你是如何构建 Web 前端 Mock Server 的？ - 莫池宇的回答 - 知乎
https://www.zhihu.com/question/35436669/answer/235608128】