「前端该如何优雅地Mock数据🏃」每个前端都应该学会的技巧

☀️ 前言

• 大家好我是小卢，事情是这样子，前段时间有个前端朋友入职了，为了简历更好看在里面写道："在前端熟练使用Mock调试接口，模拟接口数据，减少联调问题大大提高了开发效率"。
• 但是在入职后在开会的时候被指出项目开发进度缓慢。
• 产品经理：为什么项目进度这么慢？
• 后端：已经快马加鞭写接口中，部分接口我已经给了前端接口文档😅。
• 前端：我的页面写好了后端接口没写好，我的前端页面大大依赖后端接口，我没有办法进行数据调试🥺。
• 前端组长怒吼：你不是说你会用Mock？你倒是用啊😫！
  

• 以上根据真实事件改编

  🤷‍♂️ 问题出在哪

• 当这个朋友找到我的时候我很是疑惑？对啊你不是说会用Mock吗怎么不用呢🤨？
• 后来我才得知原来他说的熟练使用Mock是指在前端根据每个接口来写一个json来对应接口调用。
• 这样不仅耗时长还容易写错，怪不得会被吐槽开发效率慢。
• “那小卢哥，有没有什么办法可以让我在本地快捷进行Mock调试呢？🤤”

• 那当然有啦，听我细细道来，但是在这之前先给新同学科普一下Mock是什么？

  ❓ 什么是Mock

• 如上图所示，这是我们在开发中必须经历的过程。
• 在普遍的开发环境中，我们在拿到一个需求的时候，一般都是前后端同时开发。
• 什么？你说能不能一个需求等后端全部开发完了再让前端对接，这是不可能的事情🙅，除非公司是你家的。
• 但是事实上很多时候前端能力较强的小伙伴们，写页面的速度都特别快，唰唰唰很快啊几个静态页面全部做完了，剩下的就是对接口了。
• 这时候就需要涉及到数据方面的coding，我们需要依赖返回的接口数据进行一些复杂的逻辑处理，但是在对接口的同时难免会遇到接口文档描述不清晰的情况，比如参数名写错了，是否必填没有标注出来，种种让人头皮发麻的小问题暴露出来。
• 你要知道在开发的路上不只是你自己一个人在忙，如果每个事情都跑去问后端：“你这是不是写错了”，“哪个是必填啊”，耽误的是大家的时间，反而还会给后端同事营造一种“你好菜啊”的感觉🤯。
• 这时候学会使用最适合自己的 Mock数据的方法就非常重要，Mock翻译过来就模拟，顾名思义Api Mock就是模拟接口数据。

• 说白了就是在后端数据没有出来的情况下，还能获取到和后端约定数据结构一样的模拟数据的一门技术，以避免后端接口进度滞后影响我们正常的开发 。

  👨‍💻 别人是怎么做的

• 如果你说你们公司的接口后端都会给你写好假数据假接口来供你调试，那我强烈建议你多请他多吃几次烤羊腿🍖，毕竟这种后端少之又少，如果有，那肯定是跟你过命的好兄弟了。

• 在征集了一些前端朋友的现状后总结出大家经常用的是以下方法，我就不详细讲怎么使用了，给大家简单说一下优缺点我再总结一个最方便大家Mock数据的方法。

  本地模拟数据

• 在项目里面根据接口返回的数据进行模拟编写json，请求的时候请求到本地的json文件进行数据处理。

• 优点：

  • 没有优点。

• 缺点：

  • 虽然简单粗暴了解决了Mock数据的问题，但是也只是适用于只有几个接口的项目。一旦接口数量多起来，每个接口都需要去写一套返回参数，你不烦吗，反正我烦了。
  • 侵入前端代码，一个合格的前端团队是不允许有任何没必要的代码、注释出现的，更别说这么多的json文件。
  • 调用接口的时候url需要换成本地json地址，等到后端开发完成后还需要根据实际情况来进行替换，地球人都知道，一个项目的接口数不胜数，这样不仅仅浪费了很多时间还容易出错，我用这时间去喝个奶茶🍵不香吗。

  接口管理平台

• 最具代表的应该是yapi了，相信大多的前端开发者都是在这里拿取到后端同学的接口文档来进行开发。当然里面也是可以进行Mock数据的。

• 优点：

  • 不用侵入我们的前端代码，在调接口的时候只需要更换后端同学设定的Mock接口就可以。
  • 接口文档跟Mock一体化，后端同学修改了文档后也会一并修改Mock接口。

• 缺点：

  • 太依赖于后端同学了，甚至在我认识的大部分后端里面没有人愿意去写这个Mokc数据给前端进行调用的。
  • 增加后端开发的时间，不仅要保证Mock数据的可用性还要考虑整个项目开发的进度，有这个时间也可以喝几杯奶茶了。
  • 大部分公司都不会提供这种特殊服务，项目成本逐渐提升。

  请求拦截返回假数据

• 数据拦截指的是通过模拟Http请求对相应匹配的接口进行真实请求拦截，返回模拟的数据。
• 最具代表性的应该就是Mock.js 了吧，具体怎么使用大家可以去查看官网喔。

• 优点：

  • 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
  • 让前端攻城师独立于后端进行开发。
  • 可以随机各种参数来模拟场景，再也不用自己手写返回数据了。

• 缺点：

  • 项目规模大，多人协作，且需求接口变更快的项目不适用。
  • 需要安装和配置，是的我把这个列为缺点了，作为一个的前端如果能为自己节省更多的时间才是一个合格的前端（我太懒了）。

  🌋那应该用什么？

• 有朋友可能会说了：“啊小卢哥你这一顿说，把所有方案都否认了遍，那你讲了个寂寞啊，到底该用什么呢？”
• 别急，接下来我就要给大家介绍一种API Mock的神器：Apifox!!!🔥🔥
  
• 相信大多数人都听说过这个神级软件了，如果你没听过，一定是你上网冲浪🏄‍♀️少了，哈哈哈开个玩笑，Apifox我也是最近才知道，但是用了之后是真香啊。

• 话说回来，这个软件该怎么用，成本高吗？我告诉你：有手就行🙋，这次我就跟大家说一下他的Mock功能，其他功能可以去Apifox官网自行查看喔～

  导入接口文档

• 首先可以在Apifox里面编写接口文档，如果你之前没有在Apifox编写接口文档也没有关系。

• 不管你之前接口文档是swagger还是Postman都可以导入进Apifox。
  

  获取Mock数据

• 接下来就用一个简单的例子来演示一下如何使用Mock功能。
• 首先打开之前定义好的接口文档，这时候印入眼帘页面上会有四个tab，分别是文档、修改文档、运行和高级Mock。
  
• 在文档中我们可以看到接口的基本信息，包括但不限于接口的基础信息、请求参数、示例值、返回值和返回示例。
  
• 在修改文档中我们可以对之前定义的接口进行调整和修改，甚至还能随机生成示例值。
  

• 但这些都不是我们这次API Mock想说的，我们真正需要关注的就只有一个，那就是在运行中我们如何获取Mock数据👌。

  • 打开运行页
  • 切换Mock环境
  • 点击运行

• 是的你没有看错，这就可以了，是不是超级简单！！🤙你就可以调用这个Mock接口放到你的项目里面去调用就可以拿到根据接口文档返回的模拟数据啦，这样最基本的Mock就完成了。
  

  智能Mock规则

• 我们在修改文档处可以看到并没有给每一个参数都设置Mock规则，那为什么他会自动随机生成Mock数据呢？
• 那是因为在Apifox中系统默认启用了智能内置规则，真正的做到了零配置即可Mock 出非常人性化的数据。

• 香，真的太香了，对于我这种比较懒的人来说简直是救星✌️。
  

  定制Mock规则

• 这时候肯定又有小伙伴想问了：“诶小卢哥，那他可不可以自定义Mock规则呀，因为我们的数据有点特殊”。
• 当然可以，你看我上面那张图其实就是定制了一个简单的Mock规则，我希望参数是status的时候只模拟0跟1出来代表状态为停课和正常
  
• 我们可以新建很多你想要Mock的规则来做一个定制。
  
• 我们如果想要大部分使用默认的规则，而单独个别的参数想要用规定的Mock规则我们可以在修改文档页面选择对应的Mock规则。
  

• 至此，这次的API Mock就分享到这里喔～关于Apifox还有很多很强大的功能，这次主题是Mock就不展开细说啦～如果感兴趣的小伙伴可以去Apifox官网查看喔～

  👋 写在最后

• 首先还是很感谢大家看到这里，这次的文章就分享到这里，如果有需要建议直接收藏喔~
• 作为一个前端开发，学会Mock是最基本的事情，不仅可以提高开发效率还可以把接口信息掌握在自己的手上。
• 你不要老问自己为什么这些东西怎么这么难？你要多问问自己为什么不会，是不是没找到方法。
• 如果您觉得这篇文章有帮助到您的的话不妨🍉🍉关注+点赞+收藏+评论+转发🍉🍉支持一下哟~~😛您的支持就是我更新的最大动力。
• 如果想跟我一起讨论和学习更多的前端知识可以关注前端快快跑,与你一起奔跑在前端路上