| Mock, 接口

使用mock.js模拟接口返回

一、安装

npm install mockjs

src目录同级别，新建mock目录，新建index.js文件

二、新建入口文件

遍历mock目录下文件，动态注册所有mock接口

mock/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /index.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});
// 注册所有的mock服务
configArray.forEach((item) => {
  if (!item || item === undefined) {
    return;
  }

  for (let [path, target] of Object.entries(item)) {
    let url = window.syncProjectProperties.BASE_URL + path;
    Mock.mock(new RegExp('^' + url), target);
  }
});

三、示例

新建API文件夹，在该目录下新建模块接口模拟

mock/api/examples/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/**
 * @Description: AI模块相关接口
 */

// 引入mock数据
import { queryCatalogTreeContent, querySituationTreeIndexList } from './data';
// 导出mock相关api与方法
export default {
  // 需要mock的api地址
  // option => body 报文；type：请求方式；url：请求地址
  'service/ai/dict/queryCatalogTreeContent': options => {
    return sendData(true, options,'queryCatalogTreeContent');
    // return sendData(false, options,'queryCatalogTreeContent');
  },
  'service/ai/scence/querySituationTreeIndexList': options => {
    return sendData(true, options,'querySituationTreeIndexList');
    // return sendData(false, options,'querySituationTreeIndexList');
  },
};

/**
 * @Description: // 获取列表数据
 */
function sendData (type = true, options, name) {
  // 模拟正确返回
  if (type) {
    const request = JSON.parse(options.body)
    switch (name) {
      case 'queryCatalogTreeContent': const response = JSON.parse(JSON.stringify(queryCatalogTreeContent.success)); response.body.default.dataset = response.body.default[request.body.default.catalog_value]; return response;
      case 'querySituationTreeIndexList': return querySituationTreeIndexList.success;
    }
  }
  // 模拟错误返回
  switch (name) {
    case 'queryCatalogTreeContent': return queryCatalogTreeContent.error;
    case 'querySituationTreeIndexList': return querySituationTreeIndexList.error;
  }
};

mock/api/examples/data.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/**
 * @Description: AI模块相关接口数据
 */


// xxx
const queryCatalogTreeContent = {
  success: {
    'header': {
      'default': {
        'success': 'true',
        'message': '',
      }
    },
    'body': {
      'default': {
        company_type: [
          {
            'value': 'DSI06657B8B4DBC4B8796516FDF6B241FAD',
            'label': '股份公司'
          },
        ],
        certificate: [
          {
            "value": "certificate",
            "label": "增值业务电信许可证"
          },
        ],
        certificate_level: [
          {
            "value": "DSIE3738D433EE74F18933D0182EF351709",
            "label": "国际"
          },
        ]
      }
    }
  },
  error: {
    header: {
      default: {
        success: 'false',
        message: '服务器错误'
      }
    }
  }
};

const querySituationTreeIndexList = {
  success: {
    'header': {
      'default': {
        'success': 'true',
        'message': '',
      }
    },
    'body': {
      'default': {
        'reg_date': [
          {
            'name': '注册时间',
            'multiple': '0',
            'placeholder': '',
          }
        ],
        'company_type': [
          {
            'name': '企业类型',
            'multiple': '0',
            'placeholder': '',
          }
        ],
      }
    }
  },
  error: {
    header: {
      default: {
        success: 'false',
        message: '服务器错误'
      }
    }
  }
};

export {
  queryCatalogTreeContent,
  querySituationTreeIndexList
};