高级 Mock

设置位置：接口详情-高级 Mock

Mock 优先级说明

请求 Mock 数据时，规则匹配优先级：高级 Mock 里的期望 > 自定义 Mock 脚本。

如果匹配到了高级 Mock 里的期望，则不调用自定义 Mock 脚本。

Mock 期望

截图

配置项说明：

截图

  1. 期望条件：根据不同的请求参数，返回不同数据。如创建 2 个 期望：

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

  2. 期望条件支持设置多个参数，多个参数同时匹配时才会匹配到该期望。

  3. 期望条件支持设置参数名和参数值之间的比较关系，包含：等于、小于、大于、存在、包含等

  4. 若期望条件里的参数位置选择为body，则实际请求的 body 请求类型需要和该接口定义保持一致，如接口定义的 body 请求类型为form-data，则 mock 时该参数也需要放在form-data里。

  5. 期望条件 ： json 类型的 body 支持使用JSON Path 匹配

    • 参数名以 $ 字符起始的，使用 JSON Path 来匹配
    • 参数名不是以 $ 字符起始的，直接匹配 JSON 第一级的属性名

  6. 返回数据：即接口请求返回的数据，支持 mock.js 、Nunjucks高级 Mock - 图3 语法，即可按一定的规则返回动态数据。如下是使用动态模板语法的例子：

    1. {
    2.      "data": {
    3.          "name": "高级 mock 返回的数据",
    4.          "mockJs": [
    5.              "@cname",
    6.              "@integer(0,100)",
    7.              "@image(80x90)"
    8.          ],
    9.          "nunjucks": [
    10.           {% for i in range(0, 3) -%}
    11.           {
    12.               "id": "{{i}}",
    13.               "name": "@cname",
    14.               "friends": [
    15.                   {% for item in ['apple','banana','cat', 'dog'] -%}
    16.                   "{{item}}",
    17.                   {%- endfor %}
    18.              ]
    19.           },
    20.           {%- endfor %}
    21.          ]
    22.      },
    23.      "success": true
    24.  }

    生成数据如下：

    1. {
    2.   "data": {
    3.     "name": "高级 mock 返回的数据",
    4.     "mockJs": ["汪敏", 98, "http://dummyimage.com/80x90"],
    5.     "nunjucks": [
    6.       {
    7.         "id": "0",
    8.         "name": "梁强",
    9.         "friends": ["apple", "banana", "cat", "dog"]
    10.       },
    11.       {
    12.         "id": "1",
    13.         "name": "武秀兰",
    14.         "friends": ["apple", "banana", "cat", "dog"]
    15.       },
    16.       {
    17.         "id": "2",
    18.         "name": "胡磊",
    19.         "friends": ["apple", "banana", "cat", "dog"]
    20.       }
    21.     ]
    22.   },
    23.   "success": true
    24. }

  7. 支持自定义返回 Header、返回 HTTP 状态码、返回延迟。

截屏2022-01-18 下午4.50.48

Mock 自定义脚本

自定义脚本方式可获取用户请求的参数，可修改返回内容。

注意：此处脚本仅用于 高级mock 的 Mock 自定义脚本，不能用于前后置脚本中。

使用方法

  1. 首先开启此功能
  2. 使用 JavaScript 脚本修改返回的 JSON 数据，如图

截图

示例一

设置分页数据

  1. // 获取智能 Mock 功能自动 Mock 出来的数据
  2. var responseJson = fox.mockResponse.json();
  4. // 修改 responseJson 里的分页数据
  5. // 将 page 设置为请求参数的 page
  6. responseJson.page = parseInt(fox.mockRequest.getParam('page'));
  7. // 将 total 设置 120
  8. responseJson.total = 120;
  10. // 将修改后的 json 写入 fox.mockResponse
  11. fox.mockResponse.setBody(responseJson);

示例二

  1. var MockJs = require('mockjs');
  3. // 获取“智能Mock”自动生成的 json
  4. var responseJson = fox.mockResponse.json();
  6. // 根据请求参数（包括 query、body、path）修改响应值
  7. if(fox.mockRequest.getParam('id') === '123'){
  8.   responseJson.data = null;
  9.   responseJson.code = 400104;
  10.   responseJson.errorMessage = '数据不存在';
  11.   fox.mockResponse.setBody(responseJson);
  12.   fox.mockResponse.setCode(404);
  13. }
  15. // 根据请求的 header 修改响应值
  16. if(!fox.mockRequest.headers.get('token')){
  17.   responseJson.data = null;
  18.   responseJson.code = 400103;
  19.   responseJson.errorMessage = '没有权限';
  20.   fox.mockResponse.setBody(responseJson);
  21.   fox.mockResponse.setCode(403);
  22. }
  24. // 根据请求的 cookie 修改响应值
  25. if(fox.mockRequest.cookies.get('projectId') === '123'){
  26.     var idList = [1,2,3,4,5,6,7,8];
  27.     fox.mockResponse.setBody({
  28.         code: 0,
  29.         data: idList.map(function(id){
  30.             return {
  31.                 id: id,
  32.                 name: MockJs.mock('@cname'),
  33.                 email: MockJs.mock('@email'),
  34.                 city: MockJs.mock('@city'),
  35.             }
  36.         })
  37.     });
  38. }
  40. // 设置返回延迟
  41. fox.mockResponse.setDelay(500);
  43. // 添加 header
  44. fox.mockResponse.headers.add({
  45.     key: 'X-Token',
  46.     value: '<token>',
  47. });
  49. // 添加或修改 header
  50. fox.mockResponse.headers.upsert({
  51.     key: 'X-Token',
  52.     value: '<token>',
  53. });

请求：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 功能全解析