基础语法

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
<script>
    let mockData = Mock.mock({
        'age|10-50': 1, // 此时生成对象的 age 属性会是 10-50 之间的数 1 此时只是用来确定类型
        'arr|5-10': [
            {
                'id|+1': 1,  // id 自增
                'name|2-5': 'heo', // 此时生成对象的 name 属性会是 'heo'串的 2-5 个拼接
            }
        ]
    })
    console.log(mockData)
</script>

语法规范说明：Syntax Specification · nuysoft/Mock Wiki · GitHub

接口拦截

拦截的是 XHR 请求，axios 也可以（封装 xhr），fetch 拦截不了。

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script>
    let mockData = Mock.mock('/test', 'get', {
        'age|10-50': 1, // 此时生成对象的 age 属性会是 10-50 之间的数 1 此时只是用来确定类型
        'arr|5-10': [
            {
                'id|+1': 1,  // id 自增
                'name|2-5': 'heo', // 此时生成对象的 name 属性会是 'heo'串的 2-5 个拼接
            }
        ]
    })
    axios.get('/test').then(res=> {
        console.log(res.data)
    })
</script>

应用

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script>
   Mock.mock('/api/cart', 'get', {
        code: 0,
        msg: 'ok',
        'data|5-20': [
            {
                productName: '@csentence',
                productUrl: '@image(18*15, #008c8c, #fff, testImage)',
                'unitPrice|1-50.2': 0,
                'count|1-10': 1
            }
        ]
    })
    axios.get('/api/cart').then(res => {
        console.log(res.data)
    })
</script>