前端的苦楚
作为前端，最苦楚的是什么时候？
每个迭代，需要文档跟设计稿都进去了，动态页面唰唰两天就做完了。可是做前端又不是简略地把后端吐出来的数据放到页面上就完了，还有各种前端解决逻辑啊。
后端接口还没进去，我就得边写代码边测前端成果，又没有实在数据。有人倡议用 Mock 工具，可是每个接口都要本人写 Mock 规定，这得节约多少工夫呀。
等到后端好不容易把接口写进去了，一对接联调，好多字段的数据又跟我 Mock 的数据对不上，又得从新改代码。
每个迭代都是一场折磨。
就是那种，明明晓得这个中央整个团队都能够更有效率，但偏偏就是做不到的 无力感。
拂晓的心愿
直到有一天，我遇到这个神器。我的效率晋升了 100%。
我能够用最省力最优雅的形式失去我须要的 Mock 数据，甚至不须要任何配置。而且，联调时候已经遇到的各种令人解体的前后端数据对接问题，通通不！见！了！
就是这个⬇️
我钻研了整整一周，越钻研越是心惊。这个工具太强大，齐全超出我的预期，就如《倚天屠龙记》里张无忌修炼的乾坤大挪移，练完一层，下面还有一层，每一层都是一片全新的天地。
我已经认为，定接口什么的你们后端定就行了，跟我前端有什么关系。定好了吐数据给我就行了。
我已经认为，写接口文档什么的齐全是浪费时间，边写代码边改接口不好嘛。
直到我遇到这个神器，我才明确好的工作习惯能给我晋升多少效率。
当初的我曾经不一样了。我认为这款神器可能把全中国前端程序员的工作效率都晋升一倍。我也心愿在读这篇文章的你，可能好好把这款工具用起来。
以下还有 3000 字，浏览时长 5～10 分钟。如果你嫌读文字太麻烦，这里也有个视频，内容是一样的。
【这里插入小程序
小程序名称：哔哩哔哩
小程序门路：pages/video/video.html?__preload_=16488646759191&__key_=16488646759192&avid=382574576
展现形式：小程序卡片
卡片题目：Apifox Mock 性能全解析
卡片头图：同文章头图】
好，接下来我要发功了。
第一层：智能 Mock
Apifox 是个 API 合作工具，用它来做 Mock 数据的根底也是 API 文档。在 Apifox 里保护的 API 能够生成难看的在线接口文档，也能够像 Postman 那样一键调试，像 JMeter 那样做测试，还能够间接 Mock 数据。不过明天咱们只聊 Mock。
首先，你须要在 Apifox 外面创立一个接口，定义好 申请参数 和返回数据结构。
好了，保留。实现！
……………………
等会儿？Mock 呢？怎么就实现了？Mock 规定在哪儿写？
真的就实现了。
Apifox 会主动启动一个本地的 Mock 服务，我复制一下 Apifox 主动生成的 Mock 地址，用浏览器关上看下成果。
就是这么简略！就是这么不便！
什么！都不须要！配置！
其实咱们遇到的大部分 API 返回数据都是通用的，用户名、手机号、地址、邮箱、工夫戳，等等等等。然而你要去写 Mock 规定就很麻烦。你要怎么生成一个看起来正当的中国人名？
在 Apifox 外面，这变成了最简略的事件，甚至是齐全无感的。只有写 API 文档的时候把返回的 数据结构 定义好，这个事件就实现了。Apifox 会依据 字段名称 智能生成 Mock 数据，不须要任何配置。
如接口返回的数据结构里某个字段名称叫 username 就会失去“程敏”“王宁”“安慕希 ”“ 李玛璧”。
字段名称叫phone，就会失去15237829132、18907284633。
字段名称叫 city，就会失去 杭州市 、 高雄市 、 博尔塔拉蒙古自治州。
甚至如果你的字段名称叫 icon，就会返回一个 图片 URL，关上就真的是一张 png 图片！
如果你们团队应用的是 Swagger 等其余工具治理 API 文档，也能够导入到 Apifox（Apifox 反对 20 多种格局数据导入，还能够设置 定时主动导入 ），一样能够应用这个智能 Mock，一样是 零配置 主动生成所有 Mock 数据。
齐全不必操心任何 Mock 数据配置的问题，只有接口定好了，Mock 数据就有了，我什么前端代码都能写。
第二层：自定义智能 Mock 规定
有的同学问，你这个都是预设死的吧？我怎么晓得写什么参数名称你会给我 Mock 出什么数据来？好，这就是 Apifox Mock 性能的第二层：自定义智能 Mock 规定。
在 Apifox 外面内置了一整套 Mock 规定，当咱们的返回字段名匹配上了其中的某条规定，就会依据对应规定生成随机值（Mock.js 语法规定）。
字段名称的匹配形式反对通配符和正则表达式，比方字段只有以“url”结尾，就会失去一个正确的网址；以“mail”打头，就会失去一个邮箱地址。
要是以“time”结尾，那还会主动依据字段的数据类型来 Mock 值：string 类型的话就返回一个 ‘yyyy-mm-dd hh:mm:ss’ 格局工夫；integer 类型的话就返回一个工夫戳。是不是很智能？！
有内置规定，当然就能够自定义新规定。
比方咱们公司的订单 id 是以“DD”打头的十位数字，我就能够新建一个 string 类型的规定，匹配规定写“*orderid”，mock 规定写一个正则表达式：@regexp(/DD\d{10}/)。这样，只有我任何一个接口返回字段是以“orderid”结尾，都会失去一个“DD1284918414”这样的返回值。
第三层：返回字段高级设置
有的同学说，你这个是比拟通用的数据类型，可我还有很多没那么通用的类型，比方宠物店上架的宠物，有三种状态：可售、已售、待上架，要怎么 Mock 进去？
在 Apifox 外面，定义接口返回数据结构的时候每个字段都有一个“高级设置”的概念。比方我宠物的上架状态还能够定义为枚举，枚举可选值为（“available”，“sold”，“pending”）。如果接口这样定义了，那么 Mock 就会主动从这三个字符串里取值。
这个字段高级设置里不止有枚举，还能够设置长度范畴、正则规定等。如果字段类型是数字，还能够设置最大值最小值等。
如果你对 JSON Schema 比拟熟的话，也能够间接写 Schema，那可定义空间就更大了。
而且咱们要留神：这个时候咱们设的其实不是 Mock 规定，而是接口返回值的数据结构定义，这个是会对接口调试的 主动校验 性能失效的，如果后端接口返回的数据不合乎这里的设置，Apifox 会返回一个“数据结构校验失败”，就通知后端你接口返回数据结构不对。
而咱们的 Mock 数据也是依据这里的设置主动生成，不须要任何额定配置。
爽不爽，能够间接甩一张截图去怼后端了。
第四层：接口级自定义 Mock
有的同学说，那我还有一种场景，比方我这个用户名字段，数据定义里其实是容许他输出任意字符串的，可是我 Mock 是须要一个实在姓名的，不能靠字段定义啊。
而且，你方才演示的都是中国人名，我的客户都是欧美人怎么办。
啊，终于要针对特定接口设置一点点规定了。
在 Apifox 里，给接口定义数据结构的时候是能够给每个字段设置 Mock 规定的，而且间接就能够选一系列的罕用 Mock 规定，常见的各种数据类型其实都齐全了。比方我须要一个外文人名，我就能够在这里写 @name，运行一下就会失去“Larry Smith”“Susan Lee”这样的英文名。
如果后面说的智能 Mock 满足不了你，在这里设置规定就能够笼罩掉内置规定。这里反对 Mock.js 和正则表达式，只有你能想到的规定，全都 Mock 得进去。
而且 Apifox 反对 数据模型（Schema） 定义，不同的接口能够复用雷同的数据模型，模型里定义的规定在所有援用它的接口里都会失效，不须要任何额定的配置。
一次 Mock，一生享受。
第五层：高级 Mock
还有那么一些同学，他们说，心愿能让我本人定义：依据不同的参数值，返回不同的数据。
比方我申请的参数 宠物 ID 为 1 就返回一个在售的宠物数据，如果 宠物 ID 为 2 就返回一个已售的宠物数据。我前端能够把几种状态的页面都做进去。
好吧，Apifox mock 的第五层就是为你筹备的。
在 Apifox 的“接口治理”有一个“高级 Mock”标签页。在这里咱们能够增加“冀望”。
一个冀望就是指当你的申请蕴含某个参数值的时候，就返回特定的数据。
比方我设定我的 1 号宠物是在售的，2号宠物是已售出的，3号宠物是记录不存在的，DDD 号宠物是“ID 格局不正确”的。我把这些返回值都设好。
之后，我发送的申请参数是 1 的时候，就返回一个在售的宠物信息；2返回一个已售的；3返回一个“404 not found”，4返回一个“Invalid Param”。
啊，几乎能模仿进去一个后端服务器了！
第六层：高级 Mock 模板语法
你感觉这个 Mock 性能曾经十分弱小了是吧。我最结尾提了张无忌，你晓得张无忌的乾坤大挪移总共有几层吗？
咱们进入高级 Mock 写冀望的时候，鼠标放在这个反对“Mock.js 语法”上会浮进去一段示例。
这个示例是讲什么的呢？咱们能够在 Apifox 外面理论运行一下试试。
它生成了一个 JSON 格局的数组！
总共有 20 组 id 和名字，比方你在前端要生成一个填满数据的二维表格，一次就能 Mock 一整套！只须要短短几行代码！
咱们回来看这个语法示例，失常的 JSON 外面插入了大括号百分号包裹的两段“for”代码，它就是 JS 模板语法（Nunjucks 语法），能够应用它来生成简单的数据结构！
岂但反对 for 循环！还反对 if 分支！还反对正则表达式！还反对调用函数！
你说！是不是有我（加上 Apifox）就够了！还要后端做什么！
第七层：高级 Mock 自定义脚本
还有？？？
这是最新的 Apifox 2.1.7 才有的弱小性能。
新版本的高级 Mock 减少了一个“脚本”的 Tab，这个高级 Mock 自定义脚本是做什么用的呢？
咱们来思考一个理论的案例。我有一个“查问宠物列表”的 GET 接口，它的申请参数是 page 和 pageSize，取值是 6 和 10，含意就是我要查宠物列表的第 6 页，每页限定 10 条记录。这是个很常见的翻页场景。
返回数据首先是一个数组，每一条是我查出来的这一页的一个宠物。上面还有一个 page 和 total，也就是以后页码和总计多少条记录。申请一下，返回的 Mock 数据就是一系列的宠物信息。
到上面的 page 字段，呈现问题了：我申请的明明申请的是第 6 页的数据，你给我返回 page 是第 10 页算什么意思。
再翻翻页，新的问题又呈现了：方才还是总共 25 页呢，我一翻页就变成总共 40 页了？？？而且第 10 页的下一页是 22 页？
我心愿 Mock 进去的数据是什么样的呢？应该是我申请的是第几页，返回来的数据就是第几页；而后总页数应该是固定的，不会因为我翻前翻后就变。
这时候咱们就须要高级 Mock 的自定义脚本了。
在自定义脚本界面的右侧有一段示例代码，咱们认真读一下。
- 通过
fox.mockResponse.json()获取零碎主动生成的 JSON 数据，赋值给变量 responseJson。 - 通过
fox.mockRequest.getParam('page')获取理论申请参数 page，赋值给变量 responseJson 里的 page 字段。 - 把 responseJson 的 total 字段重写为 120。
- 通过
fox.mockResponse.setBody(responseJson)把批改后的变量 responseJson 设置到的 mockResponse 外面，这样就批改了零碎返回的 JSON 数据。
这样，我申请的是第几页，返回的就也是对应的第几页，而后总页数是放弃 12 不变（120 除以每页 10 个）。
这个自定义脚本就能够做很多事件了，比方我须要依据用户的性别是男是女 Mock 出返回的不同头像；或者先 Mock 出出生日期，而后用出生日期拼装成对应的身份证号等等，能够让咱们 Mock 进去的数据彼此吻合。
自定义脚本能够操作的对象就是这个 fox.mockRequest 和 fox.mockResponse，能够获取申请参数、Header、Cookie，批改响应 Body、HTTP 状态码等，甚至响应的延时都能够自定义。
你就说牛不牛吧！
连忙去下载吧
Apifox Mock 性能的七层天梯，打完收功。
如果你是个前端，并且读到了这里，我感觉你应该鼓一下掌。
Apifox 的 Mock 性能齐全值得你去下载。www.Apifox.cn
其余的 API 和 Mock 工具你全都能够扔掉了。
记得要下载 Apifox 桌面版应用，WEB 版目前还不反对 Mock 性能。
最初揭示一下，Mock 只是 Apifox 的性能中的一小部分。Apifox = Postman + Swagger + Mock + Jmeter，它的性能远不止这篇文章里的这些。