Mock:Intercept and directly return data 插件使用介绍

在安装好 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

支持三种 匹配方式。

• 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 配置数据

swagger 类

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

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

区别：

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

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

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

在这里，接口地址默认为 选择接口地址（支持切换为输入）。

选择地址后，会自动填充这个接口的 请求方式、接口名称，以及自动生成 返回数据。如果觉得自动生成的 返回数据 和自己想要的有点区别，再适应地手动调节一下即可。

redirect 类

Mock 方式 选择为 redirect。

区别：

1. 重定向后的接口，响应时间和重定向后的服务器有关，所以不支持配置 延迟时间。
2. 不需要配置 返回数据，需要配置 redirect 地址。

如何判断 Mock 是否配置成功？

如果 Mock 成功，会在浏览器右下角以及控制台中提示，由此可以验证是否 Mock 成功。

常见问题答疑

点击插件右上角的 问号 图标，里面有 FAQ。