一次 API Mock 的探索之旅。来自小伙伴「liuxin」的一次学习总结分享
前言
在重构项目时，因为要重写页面和迁移 js 代码，需要在重构过程中实时查看页面效果，确保页面重写正确，逻辑代码没有问题，并删除没有使用到的代码，此时流程走通就比较重要，但是因为后台同步开发，不能确保接口能直接使用，而且还有接口字段变更等情况，如果只是在开发环境或者后台本地起服务联调，就会经常遇到数据不全，接口报错，返回的数据和 swagger 文档不一致、环境崩溃等问题，导致迁移、联调进度缓慢，此时就想如果自己按照文档规范 Mock 数据是不是就解决以上问题了，但是又不想本地 JSON Mock，想弄一个简单快速 Mock 的方式，抱着这样的想法，就对 API Mock 进行了探索，最后选择了 Apifox。
- 开发中必定经历的过程
1、什么是 Apifox ？
Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台。
- Apifox
Apifox = Postman + Swagger + Mock + JMeter
- Apifox 具有的功能
接口设计、数据模型、接口调试、接口用例、接口数据 Mock、数据库操作、接口自动化调试、快捷请求、代码生成、团队协作。
本文仅对 API Mock 做介绍，其余功能可以通过 Apifox 官网进行查看。
2、导入接口文档数据
支持导入 OpenAPI 3、Swagger 1、2、3 数据格式的 json 或 yaml 文件。
- 新建团队或选择已有团队
- 新建项目或选择已有项目
- 导入接口数据
2.1、手动导入 - 文件导入
- 入口：除了点击加号外，可以从项目设置-导入数据（手动导入）-文件导入
- 可以点符合数据格式的文件拖拽到上图指定区域，也可以点击上图区域选择文件导入。
2.2、手动导入 - URL 导入
注意：选择 URL 导入时，需要填写的是 json 或 yaml 数据文件的 URL，而不是 Swagger UI 的 URL。
- 除了后台直接给 json 或 yaml 数据文件的 URL，也可以通过 Swagger UI 的 URL去获取 API 的 URL。
- 浏览器打开 Swagger UI 的 URL，然后按 F12 打开控制台，点击 network。
- network-Fetch/XHR 找到 api-docs?xxx，这个请求返回的数据就是需要的接口 API json，可以复制后保存为 json 文件，然后选择手动导入-文件导入
这个请求的请求地址就是需要的接口数据文档地址 URL ，复制请求地址后，就可以在 Apifox 上进行 URL 导入。
- URL 导入
2.3、导入-设置
导入 OpenAPI/Swagger 配置有接口、数据模型、环境三个配置。
2.3.1、接口覆盖模式
- 同 URL 覆盖：当两个文件 URL、method 相同时，新文件会覆盖旧文件。
- 同 URL 且同分组才覆盖：当两个文件的 URL、method 相同时，并且在同一个分组下时，新文件会覆盖旧文件。
- 同 URL 不导入：当两个文件 URL、method 相同时，新文件不会导入。
- 同 URL 时保留两者：当两个文件 URL、method 相同时，新文件会导入，旧文件不会被删除。
2.3.2、导入到分组
支持将文件导入到具体的分组中。
2.3.3、数据模型
数据模型可以单独设置自己的覆盖模式、导入到分组。
2.4、自动导入
注意：选择 URL 导入时，需要填写的是 json 或 yaml 数据文件的 URL，而不是 Swagger UI 的 URL。
3、API Mock
接口数据导入后，在接口列表中就可以使用 Mock 功能了。
Mock 功能可以根据接口/数据结构定义、Mock规则配置、Mock 期望配置，自动生成模拟数据，且使用者可以根据需要灵活构造各种结构的接口数据。
点击一个接口后，展示的是具有 文档、修改文档、运行、高级 Mock 四个标签的页面。
3.1、文档
在文档页签，可以看到一个接口的详细配置信息。
包括：接口地址、请求方式、接口状态、本地 Mock、云端 Mock、快捷请求、运行、生成代码、删除等功能。
3.2、修改文档
修改文档：可以修改接口的名称、分组、状态、责任人、标签、说明、请求参数等等内容。
也可以添加响应示例方便查看接口返回及 Mock 等使用。
3.3、运行
运行可以测试接口、环境是否可用，也可以把接口返回保存为用例，方便前端 Mock 使用，运行模块后台自测使用，后台在自测完成后，可以把自测内容保存，用为用例，方便前端调试。
3.4、高级 Mock
在高级 Mock 标签，可以点击新建期望创建请求接口时想要的返回接口，方便使用更加真实的数据测试前端返回数据处理，页面测试调整及为后续流程做参数使用。
- 新建期望
3.5、智能 Mock
当接口设计的返回 Response (或数据模型) 里的字段未配置 mock 规则时，系统会自动使用智能 Mock 规则来生成数据，以实现使用时零配置即可 mock 出非常人性化的数据。
- 智能 Mock 规则配置
设置位置：项目设置-功能设置-智能 Mock 规则，设置的自定义规则及内置规则。
-
自定义规则：用户可新建自定义规则，满足各种个性化需求。支持使用 正则表达式、通配符 来匹配字段名自定义 mock 规则。
-
内置规则：系统内置常用 mock 规则库，可自由决定是否开启内置规则。
-
优先级：自定义规则优先级高于内置规则，可添加自定义规则来覆盖系统内置规则。
3.6、环境配置及使用
- 配置好环境后，就可以复制前置 URL，在自己的项目中配置相关代理，代理这个 URL，然后就可以使用 Mock 功能了，在开发中调用这个环境的接口时，会根据 Mock 规则，智能生成 Mock 数据，供前端使用。
4、总结
-
使用 Apifox Mock 数据方便快捷、数据接近真实。
-
对比本地 Mock 数据
本地：费时费力，请求时还需要调整请求方式及请求地址等，不利于快速开发和维护。
Apifox：可以和后台服务公用一个请求地址，只需要替换下代理地址即可使用完全相同的请求去联调接口和调试页面。
-
Apifox 可以查看接口的详细信息，和变动，方便前后端统一，也减少了前端不时询问接口相关的问题。
-
团队协作开发，前后端各开发各的，各测试各的，不用担心数据等问题，也方便确定格式，校验格式，使用此方式开发后，与后台联调时减少不少不必要的问题。
