前端必备！5 大 mock 省时提效小 tips，用了提前下班一小时

一.一些为难前端的业务场景

在我的工作经历里，需要等待后端童鞋配合我的情形大概有以下几种：

a.我们跟外部有项目合作，需要调用到第三方接口。

一般这种情况下，商务那边谈合同，走流程，等第三方审核，我们这边会直接开始开发，而这个时候还没有外部接口可以使用；或者是合同都谈妥了，但是第三方对接的工作人员排期还没有排到。总之是需要等。

b.活动抢节点上线

一个比较赶时间节点（如七夕，双十一）的活动需求下来，前后端同时开发，后端还没有开发完接口可以调试。

c.需要调用的接口很复杂。

本来我只需要一个简单的返回，但因为各种历史原因和业务分割等原因需要间接调用 N 个不同的复杂接口，导致这部分工作量非常大耗费时间很多，但又没有很大的价值。

这个时候我就偏向于选择 mock，联调时就做得粗糙一点，然后等进入测试阶段，让测试同学给我暴露问题（测试童鞋请原谅我偷懒 hahah）

现在给前端 mock 的软件也有很多，大家自己挑自己合适的就好。

其实 mock 工具都满足的需求都大同小异，关键在于能够模拟出一些业务场景里面具体的细节，细节减少你在重复的事情上花费的时间。

我个人现在用的是 apifox（www.apifox.cn），比较起来优点是它能仿造出比较逼真的业务数据，我不用再去二次调整。

细节上节省的时间每天要是仔细去算，也有一两个小时的，省下来就是能提前下班的时长。

我这里只写一些我尝试过的在 Apifox 上 mock 数据的省时小技巧。

二.省时提效小 tips

tips1：常用的返回参数封装成一个数据模型，用到直接填。

比如一个音乐软件，最常用到的返回数据可能是歌手数据和歌曲数据。

歌手数据包括：歌手头像，歌手姓名，性别，热门歌曲 50 首等信息；

歌曲数据包括：歌曲名称，大小，歌曲链接，专辑封面，所属歌手，歌词文件等信息。

如果每次设置返回值都需要重复设置上述字段，那么麻烦又耗时。

这时候可以将常用参数分别封装成一个数据类型，填返回值的时候直接填进去，这样接口返回就能返回相应的字段了。                        

tips2：数据采用高仿真数据，避免数据类型和显示的相关 bug

之前我自己造假数据有时候会忽略了格式，只填数字或随便打几个中文字符填充，这样容易产生不必要的错误。

一是返回的数据会有格式校验，不符合的会报错，这时再回头修改浪费了时间；

二是不符合数据结构的展示也可能会出异常，如果后续还要用这个数据进行处理也会阻碍程序的正常运行。

 别的软件没怎么细用我没法详细展开说。如果大家是用 apifox 这个软件来 mock 数据的话，它在返回数据类型那里提供了很多常用的数据类型以供填充。

大家在造数据时可以根据自己的业务类型造出更仿真的数据出来。

造数据实际上很麻烦又费时间。普通的如中文姓名的还好说，如果要造 URL，邮编，16 进制色值，域名，身份证号我经常得去检索一下数据规则才能造。

 一般我是在这个软件填完返回参数后再进一步选择某类数据，apifox 会自动生成符合相应数据结构要求的数据出来。

它可以支持基础的文本，身份证，ip 地址，url 这类数据也能仿造出来。

举个例子：我在返回值中分别设置了下列数据类型：

返回值数据如下，出来的是能用的“真”数据了。

tips3：边界场景给接口“打暗号”调试

apifox 提供了一个高级 mock 功能：当用户在请求参数中填写的值符合特定的条件的时候，接口会返回特定的值。

我一般用这个功能来做边界场景的测试，比如说设置请求参数的值为 none 让接口返回空值；或者测试某个字段在各种长度下 UI 的表现是否正常。

tips4：错误码使用枚举类型，调试异常场景的兼容

另外有时候我们前端需要对后端返回的错误码进行兼容处理或者给到用户相关提示。

调试这个功能的时候我有一个比较取巧的方式是利用 response 参数设置里的高级设置。

 将错误码以枚举值的形式填进去。测试当后端返回不同的错误码类型时，前端是否有相应的反馈。

tips5：有业务约束的设置更精准的返回值

在 mock 数据上，除了数据类型本身的约束，还存在着业务约束。

有时候虽然返回的数据类型是我们要的，符合数据格式了，但还可能不符合我们实际的业务场景。

举例：某个曲库里只有 50000 张 album，但 album 返回值设置了 integer，导致每次返回可能会超出曲库 ID 上限而返回异常值。但我是需要返回的东西来执行进一步操作的，我需要它正常返回。

此时可进入高级设置，设置好返回值的数值范围，从而使得返回的数据能符合我们的调试要求。

这些虽然是很小的功能点，但确实在实际业务里能给大家节省掉不少时间。

目前 apifox 这个软件我只用了 mock 功能，所以就先分享这么多，后续有其他可以提高效率省时省力的小 tips 我再分享给大家。

如果想下载的话可以直接去他们官网 www.apifox.cn，软件目前还是免费的，直接下载就能用了。