mock.js：模拟后台响应·源栈课堂·一起帮

mock.js：模拟后台响应

当前系列： Vue.js

纯前端的同学，在开始学习Ajax之前，必须掌握：模拟从后台获取数据。

我们使用mock.js，感觉是位中国兄弟做的，^_^

引入

对还没有了解npm的同学们，可以直接引入mock.js的源代码

<script src="http://mockjs.com/dist/mock.js"></script>

生成数据

直接调用Mock.mock()方法，第一个参数是要请求的url（如果省略该参数，直接返回JSON数据），第二个参数是JSON对象：

Mock.mock("/Student/23", {
    sname: '老程',
    age: 21,
    isFemale: true,
    //......

然后，我们就可以使用Ajax请求该url，获取JSON数据了：

        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "/Student/23");
        xhttp.send();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                console.log(this.responseText);
            }
        };

随机

mock提供了一套语法，可以按要求随机生成JSON数据。其大致规律是：

'name|min-max': value

name由开发人员自定义，如sname、age、isFemale等
后跟竖线（|），指定随机值的最大最小重复次数、值、范围等
value可以是用于重复的字符串，也可以是指定数据类型，或者默认值等，还可以接内置的关键字，生成id、email、date等

//x重复2-5次
"sname|2-5":'x',

//age：10-80间随机生成，100代表整数类型而已，可以是任意整数
"age|10-80":100,

//1-100的小数，小数位数从1到10
'number|1-100.1-10': 1,

以下使用@引导的内置函数：

//标题，内容较少
"title": '@ctitle()',
//段落，内容更多
"paragraph":'@cparagraph()',

//中文姓名
name:'@cname()',
//身份证号
IDcard:"@id()",
//城市名
address:"@city(true)",

//指定格式时间
time:"@date(yyyy-MM-dd hh:mm:ss)",

我们还可以通过正则表达式自定义内容：

'id': /\d+/

重复和@函数还可以混合使用，比如生成数组：

'ids|5':["@id()"]

最牛逼的是还能生成图片：

//300*200像素……
img:"@image('300x200','#e1251b','#fff','我是随机图片')"

设置延时

真实环境中Ajax请求肯定会花一点时间的，mock.js也考虑到这一点，所以可以设置延时单位是毫秒（1000毫秒=1秒）

设置4秒后再响应

Mock.setup({ timeout: 4000 });

设置1秒至4秒间响应

Mock.setup({ timeout: '1000-4000' });

拦截回调

为了能够根据：

HTTP请求类型
url参数或者post data

给予不同的响应，我们还可以使用以下格式的mock()方法：

var m = Mock.mock(/\/Student\/\d+$/, //使用正则匹配
    'get',  //指定请求类型
    function (options) {  //options中包含了：url、type和body
        return {
            
        };
    })

演示：Ajax请求报404错误