如何Mock数据

mock 数据的好处

团队可以并行工作
有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决；测试过程中如果遇到依赖接口没有准备好，同样可以借助Mock；不会出现一个团队等待另一个团队的情况。这样的话，开发自测阶段就可以及早开展，从而发现缺陷的时机也提前了，有利于整个产品质量以及进度的保证。
开启TDD模式，即测试驱动开发
单元测试是TDD实现的基石，而TDD经常会碰到协同模块尚未开发完成的情况，但是有了mock，这些一切都不是问题。当接口定义好后，测试人员就可以创建一个Mock，把接口添加到自动化测试环境，提前创建测试。
可以模拟那些无法访问的资源
比如说，你需要调用一个“墙”外的资源来方便自己调试，就可以自己Mock一个。
隔离系统
假如我们需要调用一个post请求，为了获得某个响应，来看当前系统是否能正确处理返回的“响应”，但是这个post请求会造成数据库中数据的污染，那么就可以充分利用Mock，构造一个虚拟的post请求，我们给他指定返回就好了
可以用来演示
假如我们需要创建一个演示程序，并且做了简单的UI，那么在完全没有开发后端服务的情况下，也可以进行演示。说到演示了，假如你已经做好了一个系统，并且需要给客户进行演示，但是里面有些真实数据并不想让用户看到，那么同样，你可以用Mock接口把这些敏感信息接口全部替换。
测试覆盖度
假如有一个接口，有100个不同类型的返回，我们需要测试它在不同返回下，系统是否能够正常响应，但是有些返回在正常情况下基本不会发生，难道你要千方百计地给系统做各种手脚让他返回以便测试吗？比如，我们需要测试在当接口发生500错误的时候，app是否崩溃，别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock，这一切就都好办了，想要什么返回就模拟什么返回，妈妈再也不用担心我的测试覆盖度了

如何mock数据

React

1.不能再network中获取 (不推荐)

import Mock from 'mockjs';
import axiaos from 'axios';


Mock.setup({timeout:'100-200'});


Mock.mock('/number',{
    data: {
        'data|10': [{ 'name|1': '@ctitle', 'avatar': '@image', 'organization|1.3': '@ctitle'}],
        'page|+1': 1,
        'pers': 10,
        'count|10-1000':10,
        'message': '@MESSAGE',
        'status|10000': 1,
    }
});

axiaos.get('/data',{},).then(res=>{
    console.log('res',res);
});

2.可以在network中获取 (推荐)

import mockjs from 'mockjs';
mockjs.Random.extend({
    message: function(date) {
        let message = ['success', 'fail'];
        return this.pick(message);
    },
});
export default {
    'POST /api/list': mockjs.mock({
        'data|10': [{ name: '@name', 'status|1-2': 1 }],
        'page|+1': 1,
        'pers': 10,
        'count|10-1000':10,
        'message': '@MESSAGE',
        'status|10000':1,
    }),
    //用户列表
    'POST /api/user/list': mockjs.mock({
        'data|10': [{ 'name|1': '@ctitle', 'avatar': '@image', 'organization|1.3': '@ctitle'}],
        'page|+1': 1,
        'pers': 10,
        'count|10-1000':10,
        'message': '@MESSAGE',
        'status|10000': 1,
    }),
    //作品列表
    'POST /api/works/list': mockjs.mock({
        'data|10': [{
            'user': { 'name|1': '@name', 'avatar': '@image', 'organization|1.3': '@ctitle'},
            'content':'@cparagraph',
            'previewCount|30-1200':1,
            'likeCount|30-1200':1,
            'commentCount|30-1200':1,
        }],
        'page|+1': 1,
        'pers': 10,
        'count|10-1000':10,
        'message': '@MESSAGE',
        'status|10000': 1,
    }),
};

使用

import Http from 'axios';
import '../../../mock/api' // 这就是上面那个接口文件


  Http.post('/api/user/list',{dataType:'json'}).then(res=>{
            console.log('让我康康',res);
        })

HTML:

1.安装Node.js ，通过http-server开启本地服务器
获取端口http://localhost:8000
然后通过在文件夹创建html和json文件来测试数据
示例:

//html文件
   <body>
   <script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET','/hello.json',true)
    xhr.send()
    xhr.addEventListener('load',function(){
        var date = xhr.responseText;
        console.log(date)
    })
    </script>
//json文件
{
    "name":"jirengu",
    "age":"2"
}