背景
前端同学在日常开发需求过程中,经常会有以下困扰:
- 后端实现复杂,前期只有接口定义,很多流程接口调不通只能等着
- 有mock数据,但是mock生效需要入侵业务代码,例如在请求处注释请求而直接返回mock数据,如果忘记删后果很严重。
- 有时候需要修改某个字段来验证前端逻辑,但修改当前返回成本很高。
GraceMock功能介绍
它的本质
一个chrome浏览器插件,无需安装任何其它依赖。
它的优点
- 基本对于所有页面生效,不局限于本地,线上环境。
- 刷新页面时,自动收集当前页面ajax请求列表。
- 给想要mock的接口设置数据,一键生效mock。
- 大部分mock插件原理是在浏览器插入脚本修改ajax,可能存在破坏功能的情况。本插件使用chrome插件的debugger能力,不会影响业务代码,并且能够在network里看到真实的返回。
效果展示
第一步
打开插件开关,刷新页面
然后点击编辑接口信息
按钮,进入接口列表页。插件会帮我们用页面url进行接口分组,可以清晰看出每个页面做了哪些请求。
第二步
当然,初始接口数据是空的。我们现在填充上mock数据,并打钩开启当前接口使用mock。
第三步
回到页面,再次刷新,可以看到刚才我们修改的mock数据已经生效了。
如何使用
安装插件
- 下载插件(以下任一途径)
- 解压后,直接加载文件夹即可。
项目配置
为什么需要配置生效域名与接口?
为使mock能力尽可能的简洁
、专注
,不希望在随便打开一个页面时都去收集请求,并且有些无关页面还会轮询请求,所以插件只对设置了域名
和接口前缀
的请求生效。
以文中演示的mock掘金列表接口为例:
- 掘金页面为
https://juejin.cn/frontend
,请求接口为https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed
,固配置两个域名:https://juejin.cn
、https://api.juejin.cn
。 - 根据请求path,配置接口前缀为
/recommend_api
或/recommend_api/v1
。
最后
使用中有任何问题或建议,欢迎评论中与我联系。
原文链接:https://juejin.cn/post/7346720393414557735 作者:穿过光纤