写点什么

API Mock 教程, 简单易懂。

作者:Apifox
  • 2023-05-16
    广东
  • 本文字数:981 字

    阅读完需:约 3 分钟

API Mock 教程, 简单易懂。

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


只需 3 步就能搞定 Mock API。

第 1 步 新建项目

在 Apifox 的 App 首页,点击右侧的 “新建项目” 按钮来创建项目。


第 2 步 新建接口

这边以创建用户详情接口为例来展示创建接口的功能。


  • 请求方法: GET。

  • URL: api/user/{id}。其中 {id} 是参数: 表示用户 id。

  • 响应类型: json,

  • 响应内容:


进入上一步新建项目的首页,点击左侧的 “+” 按钮来新建接口。



填写对应的接口信息并保存:




这样,用户详情接口就创建好了。同时,Apifox 根据响应的字段格式和类型,给我们自动创建好了 Mock。点击 Mock 下的 “快捷请求” 按钮可查看 Mock 的返回:



我们来看一下 Mock 的返回。点击“快捷请求” 按钮,在进入的页面点击“发送”。



Mock 的返回还挺像样子的~

第 3 步 设置 Mock 匹配规则

大家有没有注意到一个神奇的点,我们给 name 字段设置了 string 类型,为什么会返回中文人名;给 phone 设置了 string 类型,为什么会返回手机号;给 avatar 设置了 string 类型,为什么会返回图片地址?


原因是,Apifox 支持给 Mock 设置了匹配规则。Apifox 内置了一些规则。用户也可以自定义规则。这些规则可以在 项目设置 > 功能设置 > Mock 设置中看到。



我们也可以给字段设置专门 Mock 规则。点击字段旁边的 Mock:



Apifox Mock 匹配的规则是:


  1. 当字段能满足某条 匹配规则 时,返回满足 Mock 规则 的随机内容。

  2. 当字段不满足所有 匹配规则 时,则返回满足该字段类型的随机内容。


匹配规则支持三种:


  1. 通配符。* 匹配 0 或任意多个字符。?匹配 1 个任何字符。例如:*name能匹配 username, name 等。

  2. 正则表达式。

  3. 完全匹配。


Mock 规则 完全兼容 Mock.js ,并扩展了一些 Mock.js 没有的语法(如国内手机号 @phone)。常用有:


  1. @integer:整数。@integer(min, max)。

  2. @string:字符串。@string( length ):指定长度的字符串。

  3. @regexp( regexp ):正则。

  4. @cname: 中文姓名。

  5. @url:网址。


开发中,我们可能会遇到灵活、复杂的 Mock 场景。如:根据请求参数的不同,返回不同的定制化内容。id 为 1 时,返回正常的用户信息。id 为 2 时,接口报错。Apifox 也是支持这种场景的。

知识扩展:了解更多 mock 相关知识。

用户头像

Apifox

关注

Apifox 2022-05-17 加入

Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化平台。Apifox = Postman + Swagger + Mock + JMeter

评论

发布
暂无评论
API Mock 教程, 简单易懂。_前端_Apifox_InfoQ写作社区