Chrome Mock 插件使用介绍在安装好 Mock:Intercept and directly return da

在安装好 Mock:Intercept and directly return data 插件后（如何安装？），接下来对插件的具体功能进行详细的介绍。

支持情况

可以 Mock 哪些接口？

使用 XMLHttpRequest 请求的接口。
使用 fetch 请求的接口。

正常情况下，90% 以上的接口都能进行 Mock。

不可以 Mock 哪些接口？

WebSocket 类接口。
使用 Server-sent events 方式返回的数据。（类似 chatGPT 回复）。
上传或下载文件。

功能介绍

安装好插件后，点击插件图标 或者使用快捷键 Ctrl + M（windows） 或者 Command + M（Mac） 进入配置页面。

插件首页

可以看到它有以下功能：

返回入口页面。从哪个页面进入的 Mock 插件配置页面，点击此按钮时，自动返回到对应的入口页面。
自动返回入口页面开关。开启时，当保存好单个 Mock 接口时，关闭当前配置页面并自动返回进入插件时的入口页面。
插件总开关。关闭时，所有的 Mock 接口都不生效。
添加分组。同时参与多个项目，添加分组可以方便对不同项目进行 Mock 配置。默认只有一个分组，并且不展示 分组Tab。
一键重置。配置了很多 Mock 接口，联调结束后，这些 Mock 接口都不再使用，不用挨个删除，一键重置到插件初始状态。
编辑分组。这个页面和添加分组一样，对当前分组进行编辑。
添加。根据自己的需要，添加接口的 Mock 配置。
单个 Mock 接口的开关。开启或关闭仅影响当前 Mock 接口。
编辑。对当前 Mock 接口进行修改。
克隆。复制当前 Mock 接口，复制时支持适当修改。
删除。删除单个 Mock 接口。

添加分组

添加分组中，可以：

添加组名。不同的项目，不同的业务，可以添加不同的分组，方便查看及维护。
添加 Swagger DOC URL。添加后，可以在后面添加 Mock 接口时直接选择需要 Mock 的接口。
请求头。有些 Swagger DOC 需要配置额外的请求头才能正常访问。
API包装。这个配置仅在 Swagger DOC URL 配置正确且 Mock方式 设置为 swagger 时生效。某些接口经过网关时，会在外部统一添加一层数据包装。

添加 Mock 接口

支持三种 Mock 方式。

normal。没有配置 Swagger DOC URL 时，默认的 Mock 方式。
swagger。下载并解析分组中配置的 Swagger DOC URL，根据 Swagger 定义，自动生成 Mock 数据。
redirect。对匹配的接口进行重定向。

normal 类

Mock 方式 选择为 normal

Normal 类 Mock 接口

支持三种 匹配方式。

contains（包含）。真实的请求地址中有包含配置的 接口地址，就会拦截并返回 Mock 数据。用这种匹配方式的，在输入 接口地址 处，不写 host 或 参数没写全 也能正常 Mock。
equals（全等）。真实的请求地址需要与配置的 接口地址 完全一致才能被 Mock。
regexp（正则）。写正则规则来匹配接口。（注意：直接写正则里面的规则，不用写最外层的 //。）
- 直接写 /api/test\?id=\d+（注意特殊字符 ? 需要用 \ 进行转义）
- 不要写成 /\/api/test\?id=\d+/

支持所有的 请求方式。

GET
PUT
POST
DELETE
......

支持修改 Response status code

默认值为 200。

支持修改 延迟时间。

一些需要接口延迟的交互，可以通过设置 延迟时间 来实现。比如页面的 loading。
延迟时间 默认为 1000ms。

接口地址

输入需要 Mock 的接口。

接口名称

给当前 接口地址 取一个备注名称，方便查找。

返回数据

与在控制台中的 Network 处一样的 JSON 数据。
保存后，会自动格式化 JSON 数据样式。

如果只是想修改现在接口中的几个值，可以在 Network -> 选择一个接口 -> Response 处复制，然后粘贴到 返回数据 处，并进行修改。比如：

原数据：

原数据

Mock 配置数据

Mock 配置数据

swagger 类

在分组中添加好正确的 Swagger DOC URL 后，点击 添加 按钮。

Swagger 类 Mock 数据

打开后，Mock 方式 默认为 swagger。其它选项都 Mock 方式 为 normal 基本一样。只有少许的区别。

区别：

在 Mock 方式 选择为 swagger 时，右边还多出了两个选项，数组长度 和 数组深度。这是因为部分接口在定义时，采用了递归的方式定义数据结构。

比如：[{id: 1, name: '张三', childs: [{id: 1, name: '张三', childs: [...]}]}]。

所以在自动生成时，需要控制一下，否则会导致死循环。数组长度默认为 3，数组深度默认为 4。