526互联

这次使用mock.js在浏览器里面直接测试

发布时间 2023-10-17 08:11:40作者: 狂涛爱蕞

Mock.js的原理是直接重写了XMLHttpRequest, 引入mock.js浏览器输入XMLHttpRequest, 是自定义的代码了，原始的是NativeCOde

<!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));
        });

 
//直接使用xhr的方式mock.js不能模拟，可能是和jquery集成了
        //实例化一个对象 xhr
        var xhr = new XMLHttpRequest(),
            method = "GET",
            url = "http://test.com";

        //一旦新建实例，就可以使用`open()`方法指定建立 HTTP 连接的一些细节。
        xhr.open(method, url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.D0NE && xhr.status === 200) {
                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>