mock使用教程

一、什么是mock

Mock是一种前端开发的手段，可以在前后端分离的场景下，模拟接口返回数据，通过接口文档模拟接口数据，从而使前端在本机开发时可以无需等待后端，提高开发效率和降低沟通成本，且可以规避因接口调试带来的一些问题。在前端自动化测试中，mock也可以模拟接口返回数据，保证测试的隔离性。

二、如何使用mock

使用mock需要安装mockjs，在前端中编写模拟数据的规则，返回模拟数据。mock.js提供了一套简单易用的API，可以轻松地创建随机数据和模拟接口请求。

1.安装mockjs

在Node.js环境中使用npm工具安装mockjs：

npm install mockjs --save-dev

2.编写mock规则

在前端中创建mock规则，返回模拟数据。

以一个简单的例子来说明：

import Mock from 'mockjs';

// 定义规则，其中data是参数，Mock会将参数转换为json格式
Mock.mock('/api/user',{
    'name': '@name',  //随机生成姓名
    'age|1-100': 100, //年龄1-100岁
    'job|1': ['前端开发', '后端开发'] //职业只可能是前端或后端开发
})

// 发送请求并接收响应
axios.get('/api/user', {
    data: {}
}).then(res => {
    console.log(res.data); //{name: "Lucy", age: 23, job: "后端开发"}
})

3.生成随机数据

Mock可以生成随机数据，可以利用Mock.Random()来生成模拟数据，内置了多种数据类型和生成规则，例如：

Mock.mock('/api/list',{
    'list|1-10': [{
        'id|+1': 1,  //递增的ID
        'name': '@cname', //随机生成中文名
        'img': "@image('200x100', '#FFFFFF', '#000000', 'Mock.js')"
    }]
})

4.模拟错误

Mock还可以模拟请求错误的场景，例如：

Mock.mock('/api/error',{
    'code|500-600': 500,  //返回500-600之间的错误码
    'message': '@cparagraph' //返回一段中文错误信息
})

5.延迟响应

有时候我们需要模拟延迟响应的场景，可以利用Mock的延迟设置，例如：

Mock.mock('/api/user', {
  'name': '@name',
  'age|1-100': 100,
  'job|1': ['前端开发', '后端开发']
}, {
  delay: 1000, // 延迟1s响应
})

三、mock的优缺点

1.优点

使用Mock可以模拟返回数据，从而保证前端的独立开发和测试，提高开发效率和降低沟通成本。同时，Mock可以规避由于接口调试而带来的一些问题，如接口返回错误等。Mock可以很好地解决前后端分离过程中接口与数据之间的耦合问题。

2.缺点

在Mock的实现中，需要在前端团队中编写模拟数据的规则，这需要前端有一定的后端开发经验。同时，Mock并不能完全替代接口联调，需要确保Mock的数据与实际接口数据保持一致。Mock的数据只是模拟的数据，不能代表实际系统的运行情况，因此在真正上线前还需要进行联调和测试。