Mock.js开发中拦截Ajax

Posted 2020-11-04 本木木

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

在我们的生产实际中，后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。应该有人通过编写json文件来模拟后台数据，但是很局限，比如增删改查这些接口怎么实现呢，于是今天我们来介绍一款非常强大的插件Mock.js，可以非常方便的模拟后端的数据，也可以轻松的实现增删改查这些操作。

大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki

安装

使用npm安装: npm install mockjs; 
或直接<script src="http://mockjs.com/dist/mock.js"></script>;

数据模板格式:

\'name|rule\': value

属性名|生成规则: 属性值

GET请求

发起get请求:

$.ajax({
    url: \'http://test.com\',
    type: \'get\',
    dataType: \'json\'
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});

Mock.js响应:

var obj = {\'aa\':\'11\', \'bb\':\'22\', \'cc\':\'33\', \'dd\':\'44\'};

// Mock响应模板
Mock.mock(\'http://test.com\', {
    "user|1-3": [{   // 随机生成1到3个数组元素
        \'name\': \'@cname\',  // 中文名称
        \'id|+1\': 88,    // 属性值自动加 1，初始值为88
        \'age|18-28\': 0,   // 18至28以内随机整数, 0只是用来确定类型
        \'birthday\': \'@date("yyyy-MM-dd")\',  // 日期
        \'city\': \'@city(true)\',   // 中国城市
        \'color\': \'@color\',  // 16进制颜色
        \'isMale|1\': true,  // 布尔值
        \'isFat|1-2\': true,  // true的概率是1/3
        \'fromObj|2\': obj,  // 从obj对象中随机获取2个属性
        \'fromObj2|1-3\': obj,  // 从obj对象中随机获取1至3个属性
        \'brother|1\': [\'jack\', \'jim\'], // 随机选取 1 个元素
        \'sister|+1\': [\'jack\', \'jim\', \'lily\'], // array中顺序选取元素作为结果
        \'friends|2\': [\'jack\', \'jim\'] // 重复2次属性值生成一个新数组
    },{
        \'gf\': \'@cname\'
    }]
});

可以看到结果:

{
    "user": [
        {
            "name": "董静",
            "id": 88,
            "age": 25,
            "birthday": "2015-04-01",
            "city": "湖南省 怀化市",
            "color": "#c0f279",
            "isMale": false,
            "isFat": false,
            "fromObj": {
                "dd": "44",
                "aa": "11"
            },
            "fromObj2": {
                "bb": "22",
                "cc": "33"
            },
            "brother": "jack",
            "sister": "jack",
            "friends": [
                "jack",
                "jim",
                "jack",
                "jim"
            ]
        },
        {
            "gf": "田杰"
        }
    ]
}

响应时也可以是使用function, 如:

Mock.mock(\'http://test.com\', \'get\', function() {
    return Mock.mock({
        "user|1-3": [{
            \'name\': \'@cname\',
            \'id\': 88
        }
      ]
    });
});

结果:

{
    "user": [
        {
            "name": "许超",
            "id": 88
        }
    ]
}

POST请求

发起post请求:

$.ajax({
    url: \'http://test.com\',
    type: \'post\',
    dataType: \'json\',
    data: {
      account: 888,
      pwd: \'abc123\'
    }
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});

Mock.js响应:

Mock.mock(\'http://test.com\', function(options) {
    console.log(options);
    return Mock.mock({
        "user|1-3": [{
            \'name\': \'@cname\',
            \'id|+1\': 88
        }
      ]
    });
});

可以看到结果:

{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}

{
    "user": [
        {
            "name": "曾明",
            "id": 88
        }
    ]
}

自定义响应时间

可以自定义设置响应时间, 可以是绝对值, 也可以是区间.

// 设置4秒后再响应
Mock.setup({ timeout: 4000 });  

// 设置1秒至4秒间响应
Mock.setup({ timeout: \'1000-4000\' });

数据集

Mock.Random是一个工具类，用于生成各种格式随机数据. 有两种写法:

第一种:

// 生成一个email格式的字符串
console.log(Mock.mock(\'@email\'));  // 结果: [e-mail]

第二种:

var Random = Mock.Random;
console.log(Random.email());  // 结果: [e-mail]

提供的种类有:

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

如果上面没有你需要的种类, 还可以自定义扩展, 如下:

Random.extend({
    weekday: function(date) {
        var weekdays = [\'Sunday\', \'Monday\', \'Tuesday\', \'Wednesday\', \'Thursday\', \'Friday\', \'Saturday\'];
        return this.pick(weekdays);
    },
    sex: function(date) {
        var sexes = [\'男\', \'女\', \'中性\', \'未知\'];
        return this.pick(sexes);
    }
});

console.log(Random.weekday());  // 结果: Saturday
console.log(Mock.mock(\'@weekday\'));  // 结果: 112Tuesday
console.log(Random.sex());  // 结果: 男
console.log(Mock.mock(\'@sex\'));  // 结果: 未知

校验

Mock.valid(template, data): 用来校验真实数据data是否与数据模板template匹配

var tempObj = { "user|1-3": [{ \'name\': \'@cname\', \'id|18-28\': 88 } ]};
var realData = { "user": [{ \'name\': \'张三\', \'id\': 90 } ]};
console.log(Mock.valid(tempObj, realData));

JSON Schema

Mock.toJSONSchema(template): 用来把Mock.js风格的数据模板template转换成JSON Schema

 

var tempObj = { "user|1-3": [{ \'name\': \'@cname\', \'id|18-28\': 88 } ]};
console.log(Mock.toJSONSchema(tempObj));

增删改查这些操作

1.一个简单的例子：

Mock.mock(\'http://123.com\',{
    \'name|3\':\'fei\',//这个定义数据的模板形式下面会介绍
    \'age|20-30\':25,
})

$.ajax({
    url:\'http://123.com\',
    dataType:\'json\',
    success:function(e){
       console.log(e)
    }
})

在这个例子中我们截获地址为http://123.com返回的数据是一个拥有name和age的对象，那么ajax返回的数据就是Mock定义的数据，返回的数据格式如下：

{
     name:\'feifeifei\',
     age:26,
}

至于上面的定义模板数据的格式是什么意思，下面就给大家介绍。

2.介绍如何定义数据

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
\'name|rule\': value
1.\'name|min-max\': string   通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
例子：\'lastName|2-5\':\'jiang\', 重复jiang这个字符串 2-5 次

2.\'name|count\': string   通过重复 string 生成一个字符串，重复次数等于 count
例子：\'firstName|3\':\'fei\', 重复fei这个字符串 3 次，打印出来就是\'feifeifei\'。

3.\'name|min-max\': number   生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
例子：\'age|20-30\':25, 生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型

4.\'name|+1\': number   属性值自动加 1，初始值为 number
例子：\'big|+1\':0, 属性值自动加 1，初始值为 0，以后每次请求在前面的基础上+1

5.\'name|min-max.dmin-dmax\': number   生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
例子：\'weight|100-120.2-5\':110.24, 生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位

6.\'name|1\': boolean   随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
例子：\'likeMovie|1\':Boolean, 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

7.属性值是对象：var obj={\'host\':\'www.baidu\',\'port\':\'12345\',\'node\':\'selector\'}

　　7-1.\'name|count\': object  从属性值 object 中随机选取 count 个属性。

　　例子：\'life1|2\':obj, 从属性值 obj 中随机选取 2 个属性

　　7-2.\'name|min-max\': object  从属性值 object 中随机选取 min 到 max 个属性
　　例子：\'life1|1-2\':obj, 从属性值 obj 中随机选取 1 到 2 个属性。

8.属性值是数组：var arr=[\'momo\',\'yanzi\',\'ziwei\']

　　8-1.\'name|1\': array   从属性值 array 中随机选取 1 个元素，作为最终值
　　例子：\'friend1|1\':arr, 从数组 arr 中随机选取 1 个元素，作为最终值。

　　8-2.\'name|+1\': array   从属性值 array 中顺序选取 1 个元素，作为最终值。
　　例子：\'friend2|+1\':arr, 从属性值 arr 中顺序选取 1 个元素，作为最终值，第一次就是\'momo\',第二次请求就是\'yanzi\'

　　8-3.\'name|count\': array   通过重复属性值 array 生成一个新数组，重复次数为 count。
　　例子：\'friend3|2\':arr, 重复arr这个数字2次作为这个属性值，得到数据应该是[\'momo\',\'yanzi\',\'ziwei\',\'momo\',\'yanzi\',\'ziwei\']

　　8-4.\'name|min-max\': array   通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max
　　例子：\'friend3|2-3\':arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3

3.实际的ajax请求例子：

var arr=[\'momo\',\'yanzi\',\'ziwei\']
        var obj={
            \'host\':\'www.baidu\',
            \'port\':\'12345\',
            \'node\':\'selector\'
        }

        Mock.mock(\'http://www.bai.com\',{
            \'firstName|3\':\'fei\',//重复fei这个字符串 3 次，打印出来就是\'feifeifei\'。
            \'lastName|2-5\':\'jiang\',//重复jiang这个字符串 2-5 次。
            \'big|+1\':0, //属性值自动加 1，初始值为 0
            \'age|20-30\':25,//生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型
            \'weight|100-120.2-5\':110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。
            \'likeMovie|1\':Boolean,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
            \'friend1|1\':arr,//从数组 arr 中随机选取 1 个元素，作为最终值。
            \'friend2|+1\':arr,//从属性值 arr 中顺序选取 1 个元素，作为最终值
            \'friend3|2-3\':arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。
            \'life1|2\':obj,//从属性值 obj 中随机选取 2 个属性
            \'life1|1-2\':obj,//从属性值 obj 中随机选取 1 到 2 个属性。
            \'regexp1\':/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
            
        })

        $.ajax({
            url:\'http://www.bai.com\',
            dataType:\'json\',
            success:function(e){
                console.log(e)
            }
        })

4.如何实现数据 增 删 改 查 的模拟数据接口

下面我就模拟后端删除功能的接口实现

/*模拟删除数据的方式*/
var arr=[
    {name:\'fei\',age:20,id:1},
    {name:\'liang\',age:30,id:2},
    {name:\'jun\',age:40,id:3},
    {name:\'ming\',age:50,id:4}
]

Mock.mock(\'http://www.bai.com\',\'delete\',function(options){
    var id = parseInt(options.body.split("=")[1])//获取删除的id
    var index;
    for(var i in arr){
        if(arr[i].id===id){//在数组arr里找到这个id
            index=i
            break;
        }
    }
    arr.splice(index,1)//把这个id对应的对象从数组里删除
    return arr;//返回这个数组,也就是返回处理后的假数据
})
$.ajax({
    url:\'http://www.bai.com\',
    type:"DELETE",
    data:{
        id:1//假设需要删除id=1的数据
    },
    dataType:\'json\',
    success:function(e){
        console.log(e)
    }
})

至于更多的详细文档可以去官方网站查看，http://mockjs.com/，Mock.js简单易学，可以便于前端的快速开发，也可以自己定义好需要的格式，让后端配合你，按照你的格式编写他的后端代码。

 

参考:https://www.cnblogs.com/zhenfei-jiang/p/7235339.html

https://segmentfault.com/a/1190000008839142