Chrome插件 - 浏览器Mock插件安装使用教程(Mock:Intercept and directly return data)
在进行前端开发过程中,少不了要写一些 Mock 数据。而利用 Mock 插件,可以让我们开发时不用在代码中写死 Mock 数据。而要联调时,只需关闭插件中对应接口的 Mock 即可。下面将介绍这个插件的安装和使用。
(4)再次回到最初的测试页面重新发起 Ajax 请求,可以看到返回的数据变成了我们设置的 Mock 数据了。
1,插件介绍与安装
(1)“Mock:Intercept and directly return data”是一款基于 Chrome 浏览器的 Mock 插件,它有如下特色:
- 支持拦截和模拟使用 XMLHttpRequest 或 fetch 方法来请求的接口。
- 根据 swagger2.0 文档自动生成 Mock 数据。
- 支持 GraphQL 请求的 Mock。
- 允许对匹配的接口进行 Redirect 操作。
- 提供 contains、equals 和 regexp 三种匹配模式,以满足不同的接口匹配需求。
- 成功拦截匹配的接口,直接返回对应的 Mock 数据,无需进行实际的网络请求,Mock 时就不用等待接口返回 200 后才能继续进行后面的操作。
- 可以设置延迟返回时间,以模拟真实接口的响应。
- 保存成功后,支持自动返回入口页面,方便继续其他操作。
- 支持中英文两种语言。根据浏览器语言环境,自动显示对应的语言。
- 支持一键重置。
- 支持对 Mock 的配置进行 Clone。
- 支持 Mock 列表分组。
(2)我们只需要进入 Chrome 应用商店搜索“Mock:Intercept and directly return data”安装即可:
2,使用说明
(1)假设我们页面会发送个 Ajax 请求,请求地址为“https://httpbin.org/get”,默认服务端请求结果如下:
(2)以添加该接口的 Mock 数据为例,我们点击浏览器的菜单栏 Mock 插件图标进入 Mock 插件的配置页面。然后点击“添加”按钮。
(3)填写相关的匹配规则、请求方式、接口地址、返回数据等,然后点击“确定”保存退出 。
注意:我这里接口地址填的是“/get”表示会拦截所有 URL 中包含“/get”的请求。我们也可以填写完整的路径,比如:https://httpbin.org/get
(5)注意拦截成功后,在浏览器的 Network(网络) Tab 下,不会再执行这请求。但是会在浏览器右下角以及控制台中进行相关提示,由此可以验证是否 Mock 成功。