7、Mock 拦截 axios 请求mock 拦截 axios 1.这个也是最终的需求功能，我们假设 axios 异步请

mock 拦截 axios

1.这个也是最终的需求功能，我们假设 axios 异步请求的数据尚未上线或不全；

2.然后再通过 mock 请求拦截，随机生成填充的数据进行前端设计；

//ajax 请求
axios.request({
    method : 'get',
    url : 'https://cdn.liyanhui.com/data.json'
}).then(res => {
    console.log(res.data);
});

//mock 拦截，并随机生成填充数据
Mock.mock('https://cdn.liyanhui.com/data.json', {
    'list|5-10': [{
        'id|+1': 1,
        'username' : '@cname',
        'email' : '@email',
        'price' : '@integer',
        'gender' : '@boolean'
    }]
})

练习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

    //ajax
    axios.request({
        method : 'get',
        url : 'https://cdn.liyanhui.com/data.json'
    }).then(res => {
        console.log(res.data);
    });

    //mock拦截
    Mock.mock('https://cdn.liyanhui.com/data.json', {
        'list|5-10' : [
            {
                'id|+1' : 1,
                'username' : '@cname',
                'email' : '@email',
                'gender' : '@boolean',
                'price' : '@integer'
            }
        ]
    });

    </script>
</head>
<body>

</body>
</html>