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

背景

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

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

GraceMock功能介绍

它的本质

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

它的优点

  1. 基本对于所有页面生效,不局限于本地,线上环境。
  2. 刷新页面时,自动收集当前页面ajax请求列表。
  3. 给想要mock的接口设置数据,一键生效mock。
  4. 大部分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.cnhttps://api.juejin.cn
  • 根据请求path,配置接口前缀为/recommend_api/recommend_api/v1

最后

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

相关推荐
fruge1 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
sean2 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636022 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
太过平凡的小蚂蚁4 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫4 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳5 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng6 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪6 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛6 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能6 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端