共计 2232 个字符，预计需要花费 6 分钟才能阅读完成。
引言
前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用 mock 方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在 mock 上的一些理解。由于作者刚参加工作，水平有限，如果哪里写到不对，请评论指出。
1. 原理
何为 mock, 我认为 mock 主要就是通过正常请求在后端接口进度落后的情况下，还能获取到和后端约定数据结构一样的模拟数据的一门技术，以避免后端接口进度滞后影响我们正常的开发。mock 可能会涉及到 4 门技术，分别是服务端技术、随机生成特定格式数据的技术、请求转发、请求拦截。
2. 常用手段分类
2.1 硬刚型
将模拟数据直接写在代码里
优点：简单暴力缺点：改变了代码原有逻辑，且耦合度高，当后端接口完成的时候还需要再改代码。
2.2 拦截型
mockjs
mockjs 通过改写 ajax 函数来实现拦截请求，同时它还能伪造各种随机数据，通过 mockjs 我们能很方便的实现简单的 mock 效果，优点：简单方便缺点：无法模拟真实的请求，不支持 fetch（需要额外调用插件）
Mock.mock(‘/api/news’, { name: ‘Jack’, ‘age|10-20’: 10});
Charles、Fiddler、postman
利用 Charles、Fiddler 等代理工具拦截请求优点：有真实的请求缺点：配置上优点复杂
2.3 Mock Server
node/express/json-server + mockjs/fakejs
Mock Server 简单的说就是起一个服务器，服务器提供接口产生相应的 mock 数据前者用来起服务，后者用来产生模拟数据。json-server 是对 express 的一个封装，用于快速构建服务器而不用写后台代码这里重点注意一下，对于一般的项目我们可以用 json-server，但是如果是在 vue-cli 之类生成的项目里面，实际上 webpack 已经帮我们起了一个服务，这是我如果我们想额外起一个 json-server，就需要在 vue.config.js 里面配置 proxy。当然我们也可以不另外起服务，就用 dev-server，在 webpack 的 devServer.before 里面进行配置
devServer: {
// proxy: {// 额外起一个服务，然后进行转发
// ‘/api’: {
// target: ‘json-server 服务的 ip：端口号 ’,
// pathRewrite: {‘/api’: ”}
// }
// }
before: function(app) {// 直接用 devserver 这个服务
app.get(‘/api/news’, function(req, res) {
res.json({msg: ‘dev-before’})
})
}
}
优点：真实，低耦合，可扩展缺点：后端参与较少
2.4 Mock 平台
RAP/Easy-Mock
对于小型开发团队的话，Mock Server 或者 mockjs 完全够了，因为此时前后端沟通代价比较小。但是如果是大型开发团队呢，这时候，文档的编写，接口的变更，通知到每一个人，代价就比较大了。这也是 RAP，Easy-Mock 这类 mock 平台由来的原因。优点：接口代理，协同编辑，mock 数据，智能提醒，自动生成文档缺点：你要说服后端使用它
3 具体开发流程举例
这里就假设我们用 devServer.before + mock.js 来开发假设后端要开发两个接口 www.test/api/news/, www.test/api/price/3.1 后端开没开动我们在 devServer 虚拟两个接口
在 devserver 里面配置 before
devServer: {
before: function(app) {
app.get(‘www.test/api1/news’, function(req, res) {// 只对 api1 进行拦截
res.json({mockjs 产生的模拟数据})
})
app.get(‘www.test/api1/price’, function(req, res) {// 只对 api1 进行拦截
res.json({mockjs 产生的模拟数据})
})
}
}
// 在 /src/api/index.js 里面
const getNews = axios.get(www.test/api1/news)
const getPrice = axios.get(www.test/api1/price)
export {
getNews,getPrice
}
// 由于 /api1 会被 before 拦截从而得到 mock 数据，没有问题
3.2 后端开发了部分接口，比如 www.test/api/news/ 开发完毕
// 在 /src/api/index.js 里面修改 /api1 为 /api
const getNews = axios.get(www.test/api/news) // 此时这个请求不会被拦截，走真实接口，而未开发完的接口请求还是走模拟数据接口
3.3 后端全部开发完毕
全部将 /api1 修改为 /api, 同时注释掉 devserver.before
也可以直接用 mockjs 进行拦截，步骤差不多，但是更简单
4. 展望
现阶段暂时无法数据联动，也就是对于前端来说，接口变更，还需要手动在 ide 上修改代码。如果能够开发一套插件，前端只需初始编写一次代码，后面 ide 自动同步接口变化，然后自动修改代码，不是爽歪歪！
总结
如果你目前的项目是中小型项目，那么可以使用 mockjs 或者 Mock Server 之类，如果项目比较大，还是建议使用在线 mock 平台。
