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

☀️ 前言

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

🤷‍♂️ 问题出在哪

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

❓ 什么是Mock

• 如上图所示，这是我们在开发中必须经历的过程。
• 在普遍的开发环境中，我们在拿到一个需求的时候，一般都是前后端同时开发。
• 什么？你说能不能一个需求等后端全部开发完了再让前端对接，这是不可能的事情🙅，除非公司是你家的。
• 但是事实上很多时候前端能力较强的小伙伴们，写页面的速度都特别快，唰唰唰很快啊几个静态页面全部做完了，剩下的就是对接口了。
• 这时候就需要涉及到数据方面的coding，我们需要依赖返回的接口数据进行一些复杂的逻辑处理，但是在对接口的同时难免会遇到接口文档描述不清晰的情况，比如参数名写错了，是否必填没有标注出来，种种让