关于前端:前端该如何优雅地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是最根本的事件，不仅能够进步开发效率还能够把接口信息把握在本人的手上。
• 你不要老问本人为什么这些货色怎么这么难？你要多问问本人为什么不会，是不是没找到办法。
• 如果您感觉这篇文章有帮忙到您的的话无妨🍉🍉关注+点赞+珍藏+评论+转发🍉🍉反对一下哟~~😛您的反对就是我更新的最大能源。
• 如果想跟我一起探讨和学习更多的前端常识能够关注前端快快跑,与你一起奔跑在前端路上