如何通过 mock 数据提高前端开发效率？

我们在做项目开发的过程中，因为是同步开发，所以前端会有等后端接口的情况。为了前后端并行开发，我们一般会要求后端开发人员先定义好接口文档。这样前端通过模拟数据，就能顺畅地进行前端业务逻辑的开发了。

这种模拟数据，就叫做 mock 数据。前端使用 Mock 数据进行开发，能极大的提高前端开发的效率。今天介绍两种常用的做法。

第一种，使用第三方可视化接口管理工具。

比如我公司用的就是 YAPI，这样后端开发在写接口文档的时候，就自动把测试的接口也部署好了。

如果你使用这个，我大体有两个建议。

一、这种服务最好是部署到自己的服务器上。因为第三方的接口不稳定，在调试的时候偶尔挂掉会极大的影响工作效率。

二、要使用好这种第三方平台，一定要后端开发养成实时更新的习惯，否则会出现很多因为数据不实时，导致很多简单的但是需要沟通确认的问题。

很多公司使用后并没有感觉到效率提升，大概率是因为接口变动比较频繁引起的。

第二种，使用 mock.js 库。

mock.js 是一个模拟数据的 js 库，官网地址：http://mockjs.com/。

前端开发人员自己模拟返回的数据。这个库有两个核心功能：生成随机数据，拦截 ajax 请求。

前端的请求会访问到前端自己写的方法里。这样的好处有很多，比如可以通过模拟各种随机数据，各种不同场景下程序是如何反应的。

对比起直接在前端业务层使用测试代码，这个 js 库会更方便，前端业务逻辑层上不需要做任何修改，就能自动切换 mock 和真实环境。

我们可以通过启动命令区分是否使用 mock 测试。比如：在 vue 项目的 package.json 里添加如下命令。

"serve:no-mock": "cross-env MOCK=none vue-cli-service serve",

使用这种方式的前提是前端了解后端的返回数据结构。如果是因为接口数据格式频繁变动导致的效率低下，那不是技术能解决的。

我发现很多人还是习惯在业务代码里写测试数据，这个习惯很不好，很容易因为忘记删除测试数据而出现各种问题。以上两种 mock 模拟后端接口返回的方式，选一个适合自己的即可。