键盘敲烂,月薪过万作业不做,等于没学
当前系列: Javascript入门 修改

纯前端的同学,在开始学习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错误

  • 不匹配的url
  • 不匹配的method
传到后台的数据能够在options.body中查看到
xhttp.send({
    age: 24
}); 

mock.js
觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 Javascript入门 中继续学习:

下一课: 已经是最后一课了……

我们的 特色

  • 面向就业
  • 线上线下结合
  • 同学互助
  • 师生共赢

报班 QQ群:273534701

  • 获取视频资料
  • 要求作业点评
  • 参加阶段性测试
  • 模拟面试