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

Apifox 是一款强大的 API 设计工具,还拥有 Mock 功能,使你能够在开发 API 的早期阶段进行测试。

用 Apifox,节省研发团队的每一分钟

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

免费使用 Apifox

相关推荐

最新文章

API

一体化协作平台

API 设计

API 文档

API 调试

自动化测试

API Mock

API Hub

立即体验 Apifox
目录

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

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

Mock 数据
Mock 数据

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

智能 Mock

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

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

Apifox 智能 Mock
智能 Mock

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

自定义 Mock

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

Apifox 自定义 Mock
自定义 Mock

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

Apifox 自定义 Mock设置
Mock 设置

高级 Mock

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

期望

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

  1. 请求参数id1时,返回销售状态为available的数据。
  2. 请求参数id2时,返回销售状态为sold的数据。

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

1 id1时,返回销售状态为available的数据:

Apifox 高级 Mock
available 数据

2 请求参数id2时,返回销售状态为sold的数据:

Apifox 高级 Mock
sold 数据

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

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

{
     "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。

Apifox 自定义 Mock 脚本
自定义 Mock 脚本

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

  1. 请求参数id1时,返回销售状态为available的数据。
  2. 请求参数id2时,返回销售状态为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 自动化测试等功能,还没用过的小伙伴们,来用用看吧~

知识扩展: