API Mock 是开发者在构建 API 时常用的功能。在软件开发的初期,后端 API 接口可能还没有实现或者还没有完全实现。在这种情况下,Mock API 可以模拟后端 API 的行为,供前端开发人员调用,从而避免等待后端 API 的完成。
Postman 和 Apifox 都支持 API Mock,本文用三个场景来介绍这两个产品在功能上的差异。
场景1: 固定的 Mock 值
我们以用户详情接口为例来展示固定的返回值。接口定义如下:
- 请求方法: GET。
- URL: /api/user/{id}。其中 {id} 是参数: 表示用户 id。
- 响应类型: json,
- 响应内容:
{
id: number, // 用户id
name: string, // 用户名
avatar: string, // 头像图片地址
}
固定的响应内容如下:
{
"id": 1,
"name": "小王",
"avatar": "http://dummyimage.com/100x100",
}
Postman 的实现
Postman 实现 Mock 需要在 Mock Servers 中创建 Mock。


下面,我们来测试下效果。在 Collections 下,可以找到刚刚创建的 Mock。点击 Send 按钮,返回如下:

Apifox 的实现
Apifox 在创建接口的时,自动做了 Mock。下面我们来创建接口。


Apifox 默认是根据响应信息的结构来随机的生成 Mock 值的。要生成和响应示例一致的固定值,只需在 项目设置中,将 Mock 方式改成响应示例优先即可。

下面,我们来测试下效果。点击接口详情中的 Mock 那的快捷请求。在打开的快捷请求页面即可看到效果。


场景2: 随机的 Mock 值
有时,我们期望接口返回随机值。Postman 不支持随机的 Mock 值。Apifox 支持。
Apifox 的实现
在项目设置中,将 Mock 方式 改回 智能 Mock 优先。

我们来看一下效果:

返回随机值了,但 name 字段的 Mock 是个随机的字符串,看着难受。我们来改下 name 的 Mock 规则,让其返回随机的中文名。

再看下效果:

完美~
场景3: 不同情况,返回不同的值
我们希望 Mock 异常的情况。比如:id 是 999 时,返回异常的响应:
{
"error": 1,
"errroMsg": "未找到用户信息"
}
Postman 的实现
在 Mock 的接口下,多加个 example 来返回异常的响应。


测试下效果:

Apifox 的实现
Apifox 的高级 Mock 中的 期望,可以实现该功能。


测试一下:

总结
通过上面的场景,我们可以发现:虽然 Postman 和 Apifox 都支持 API Mock,但 Apifox 的功能更强大,也更易用。没用过的小伙伴来体验一下 Apifox 吧~

知识扩展