如何使用 Apifox 进行 Mock 以便轻松测试 API

Mock API 是一种用模拟数据代替真实 API 接口返回的的技术。在开发过程中，前端开发往往依赖后端 API，但后端 API 还在开发中。通过 Mock API，前端无需等待后端 API 开发完成。前端可以用 Mock API 返回的模拟数据来开发。

Apifox 是一款支持 Mock，并且功能强大，容易上手的接口管理工具。下图上用 Apifox Mock 的数据效果：

本文来介绍下 Apifox 的智能 Mock，自定义 Mock 和高级 Mock 的用法。

智能 Mock

智能 Mock 指：当接口设计的返回 Response (或数据模型) 里的字段未配置 mock 规则时，系统会自动使用智能 Mock 规则来生成数据，以实现使用时零配置即可 mock 出非常人性化的数据。

所有的智能 Mock 规则可以在：项目设置 > 功能设置 > Mock 设置 中看到。

立即体验 Apifox

如果不需要智能 Mock，可以关闭。

自定义 Mock

我们可以在设计接口字段返回的的时候，自定义 Mock 规则。

如果当前项目中的某个字段都需要一样的 Mock 规则，可以在 项目设置 > 功能设置 > Mock 设置 中设置。

高级 Mock

有时侯，Mock 的场景比较复杂，用上面的 Mock 方法搞不定。此时就需要用高级 Mock了。高级 Mock 包含期望和自定义脚本。

期望

考虑这样的场景：根据不同的请求参数，返回不同数据。如：

请求参数id为1时，返回销售状态为available的数据。
请求参数id为2时，返回销售状态为sold的数据。

期望就是匹配规则，则返回规则中设置的响应。实现上面的场景，需要在高级 Mock 下的 期望 Tab 中新建两个期望：

1 id为1时，返回销售状态为available的数据：

2 请求参数id为2时，返回销售状态为sold的数据：

期望条件的参数位置还支持：query，header， cookie，body。比较操作还支持：不等于，大于，小于，包含，不包含，正则匹配等。

期望的返回数据支持：mock.js 、Nunjucks 语法。如下是使用动态模板语法的例子：

{
     "data": {
         "name": "高级 mock 返回的数据",
         "mockJs": [
             "@cname",
             "@integer(0,100)",
             "@image(80x90)"
         ],
         "nunjucks": [
          {% for i in range(0, 3) -%}
          {
              "id": "{{i}}",
              "name": "@cname",
              "friends": [
                  {% for item in ['apple','banana','cat', 'dog'] -%}
                  "{{item}}",
                  {%- endfor %}
             ]
          },
          {%- endfor %}
         ]
     },
     "success": true
 }

生成数据如下：

{
  "data": {
    "name": "高级 mock 返回的数据",
    "mockJs": ["汪敏", 98, "http://dummyimage.com/80x90"],
    "nunjucks": [
      {
        "id": "0",
        "name": "梁强",
        "friends": ["apple", "banana", "cat", "dog"]
      },
      {
        "id": "1",
        "name": "武秀兰",
        "friends": ["apple", "banana", "cat", "dog"]
      },
      {
        "id": "2",
        "name": "胡磊",
        "friends": ["apple", "banana", "cat", "dog"]
      }
    ]
  },
  "success": true
}

自定义 Mock 脚本

自定义 Mock 脚本比期望更灵活。使用自定义脚本可以获取用户请求的参数，根据具体情况修改返回内容。

自定义 Mock 脚本写在高级 Mock > 脚本 Tab。

我们用自定义 Mock 脚本来实现：根据不同的请求参数，返回不同数据：

请求参数id为1时，返回销售状态为available的数据。
请求参数id为2时，返回销售状态为sold的数据。

脚本如下：

// 获取智能 Mock 功能自动 Mock 出来的数据
const responseJson = fox.mockResponse.json()
// 获取参数中的id
const id = parseInt(fox.mockRequest.getParam('id'))

if (id === 1) {
    responseJson.status = 'available'
}
if (id === 2) {
    responseJson.status = 'sold'
}

// 将修改后的 json 写入 fox.mockResponse
fox.mockResponse.setBody(responseJson)

自定义 Mock 脚本中可获取和修改的API如下：

请求：fox.mockRequest

fox.mockRequest.headers 请求的 HTTP 头
fox.mockRequest.cookies 请求带的 Cookies
fox.mockRequest.getParam(key: string) 获取请求参数，包括 Path 参数、Body 参数、Query 参数。

响应：fox.mockResponse

fox.mockResponse.headers 响应的 HTTP 头
fox.mockResponse.code 系统自动生成的的 HTTP 状态码
fox.mockResponse.json() 系统自动生成的 JSON 格式响应数据
fox.mockResponse.setBody(body: any) 设置接口返回 Body，参数支持 JSON 或字符串
fox.mockResponse.setCode(code: number) 设置接口返回的 HTTP 状态码
fox.mockResponse.setDelay(duration: number) 设置 Mock 响应延时，单位为毫秒

Mock 匹配的优先级

Mock 匹配的优先级是：高级 Mock 里的期望 > 自定义 Mock 脚本 > 字段的 Mock 规则 > 项目内字段的 Mock 规则 > 智能 Mock 规则。

更多 Mock 用法，见官方文档。Apifox 除来 Mock 功能外，还支持API 文档、API 调试、API 自动化测试等功能，还没用过的小伙伴们，来用用看吧～

知识扩展：