GraceMock:原来Mock可以如此简单!

背景

前端同学在日常开发需求过程中,经常会有以下困扰:

  • 后端实现复杂,前期只有接口定义,很多流程接口调不通只能等着
  • 有mock数据,但是mock生效需要入侵业务代码,例如在请求处注释请求而直接返回mock数据,如果忘记删后果很严重。
  • 有时候需要修改某个字段来验证前端逻辑,但修改当前返回成本很高。

GraceMock功能介绍

它的本质

一个chrome浏览器插件,无需安装任何其它依赖。

它的优点

  1. 基本对于所有页面生效,不局限于本地,线上环境。
  2. 刷新页面时,自动收集当前页面ajax请求列表。
  3. 给想要mock的接口设置数据,一键生效mock。
  4. 大部分mock插件原理是在浏览器插入脚本修改ajax,可能存在破坏功能的情况。本插件使用chrome插件的debugger能力,不会影响业务代码,并且能够在network里看到真实的返回。

效果展示

第一步

打开插件开关,刷新页面

GraceMock:原来Mock可以如此简单!

然后点击编辑接口信息按钮,进入接口列表页。插件会帮我们用页面url进行接口分组,可以清晰看出每个页面做了哪些请求。

GraceMock:原来Mock可以如此简单!

第二步

当然,初始接口数据是空的。我们现在填充上mock数据,并打钩开启当前接口使用mock。

GraceMock:原来Mock可以如此简单!

第三步

回到页面,再次刷新,可以看到刚才我们修改的mock数据已经生效了。

GraceMock:原来Mock可以如此简单!

如何使用

安装插件

GraceMock:原来Mock可以如此简单!

项目配置

为什么需要配置生效域名与接口?

为使mock能力尽可能的简洁专注,不希望在随便打开一个页面时都去收集请求,并且有些无关页面还会轮询请求,所以插件只对设置了域名接口前缀的请求生效。

以文中演示的mock掘金列表接口为例:

  • 掘金页面为https://juejin.cn/frontend,请求接口为https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed,固配置两个域名:https://juejin.cnhttps://api.juejin.cn
  • 根据请求path,配置接口前缀为/recommend_api/recommend_api/v1

GraceMock:原来Mock可以如此简单!

最后

使用中有任何问题或建议,欢迎评论中与我联系。

原文链接:https://juejin.cn/post/7346720393414557735 作者:穿过光纤

(0)
上一篇 2024年3月16日 下午5:13
下一篇 2024年3月17日 上午10:06

相关推荐

发表回复

登录后才能评论