这次使用mock.js在浏览器里面直接测试
Mock.js的原理是直接重写了XMLHttpRequest, 引入mock.js浏览器输入XMLHttpRequest, 是自定义的代码了,原始的是NativeCOde, 但是重写后, 使用原生的js也是可以的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="http://mockjs.com/dist/mock.js"></script> <script> const data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) console.log(data) console.log(JSON.stringify(data, null, 4)) 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' }] }); // 设置4秒后再响应 Mock.setup({ timeout: 4000 }); // 设置1秒至4秒间响应 Mock.setup({ timeout: '1000-4000' }); $.ajax({ url: 'http://test.com', type: 'get', dataType: 'json' }).done(function (data, status, xhr) { console.log(JSON.stringify(data, null, 4)); });
//因为mock.js重写了xmlhttprequest,以下方式也是正常触发的
//实例化一个对象 xhr
var xhr = new XMLHttpRequest(),
method = "GET",
url = "http://test.com";
//一旦新建实例,就可以使用`open()`方法指定建立 HTTP 连接的一些细节。
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) { //XMLHttpRequest.D0NE,这个值==4,但是在mock.js中是未定义的
console.log(xhr.responseText)
}
}
// 上面代码中,一旦`XMLHttpRequest`实例的状态发生变化,就会调用监听函数`handleStateChange`
// 最后使用`send()`方法,实际发出请求。
//发包
xhr.send();
// Mock.mock('http://test.com', 'get', function () { // return Mock.mock({ // "user|1-3": [{ // 'name': '@cname', // 'id': 88 // } // ] // }); // }); // $.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)); // }); // var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 }] }; // var realData = { "user": [{ 'name': '张三', 'id': 90 }] }; // console.log(Mock.valid(tempObj, realData)); // var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 }] }; // console.log(Mock.toJSONSchema(tempObj)); // console.log(Mock.mock('@email')); // var Random = Mock.Random; // console.log(Random.email()); // 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')); // 结果: 未知 </script> </body> </html>