乐趣区

关于mock: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 相干常识。

  • 什么是 Mock
  • Mock 语法解说
退出移动版