Mock —— 生成随机数据，拦截ajax请求

今天药忘吃喽~ 2023-06-13 11:15 11阅读 0赞

##### 1. 使用Mock.js步骤 #####

> 1.  安装：`npm install mockjs --save-dev`
> 2.  新建单独文件夹进行数据模拟
> 3.  在新建的文件夹里使用Mock(以带有匹配类型的Ajax请求为例)：  
>     a. `import Mock from "mockjs"`  
>     b. Mock.mock(url,method,\{\})
> 4.  在`main.js`引入Mock：`require("mock所在文件目录")` / `import 'mock所在文件目录'`

> 若想直接得到随机生成的数据，则直接在所需要随机数据的文件中：  
> a. `import Mock from "mockjs"`  
> b. Mock.mock(template)（返回的值为根据模板随机生成的数据）

##### 2. 语法规范 #####

> 下面所有的name都是请求返回值中的键名，可随意起名称

###### ① 属性值是字符串String ######

a. `'name|min-max':string`：通过重复`string`生成一个字符串，重复次数小于等于`max`大于等于`min`  
b. `'name|count':string`：通过重复`string`生成一个字符串，重复次数为`count`

###### ② 属性值是数字Number ######

a. `'name|+1'：number`：属性值自动加1，初始值为number。注意：① 每请求一次，返回的值为上次返回值+1，从number开始自增。② 若将该式子放到随机数组中，可以不多次请求，就可直接自增。

//随机属性值1-10次（在1-10中随机选取count值），最终返回一个数组（将随机重复的结果放到数组中），若count>1，则每次得到的num都比上一次的num值大1
     "arr|1-10":[{ 
         "num|+1":3
    }],

b. `'name|min-max':number`：生成一个大于等于min小于等于max的值。属性值 number 只是用来确定类型。  
c. `'name|min-max.dmin-dmax':number`：生成一个浮点数，整数部分大于等于min，小于等于max，小数部分随机生成`dmin-dmax`位

Mock.mock({ 
        'number1|1-100.1-10': 1,
        'number2|123.1-10': 1,
        'number3|123.3': 1,
        'number4|123.10': 1.123
    })
    // =>
    { 
        "number1": 12.92,
        "number2": 123.51,
        "number3": 123.777,
        "number4": 123.1231091814
    }

###### ③ 属性值为`Boolean` ######

a. `'name|1':boolean`：随机生成一个布尔值，值为`true`的概率为1/2，值为`false`的概率为1/2  
b.`'name|min-max'：value`：随机生成一个布尔值，值为`value`的概率为`min/(max+min)`，值为`!value`的概率为`max/(max+min)`

###### ④ 属性值为`Array` ######

a. `'name|1':array`：从`array`数组中随机选取1个属性值，作为最终值。  
b：`'name|+1':array`：从`array`数组中顺序选取1个属性值，作为最终值（注意：array数组第一个元素作为默认值。当多次请求时，每次请求都选取上一次选取的元素的下一个元素。当非多次请求时，按照顺序选取数组中的元素）  
c. `'name|min-max':array`：通过重复`array`数组的属性值生成一个新数组，随机次数大于等于`min`小于等于`max`  
d. `'name|count":array'`：通过重复`array`数组的属性值随机生成一个新数组，重复次数为`count`次

###### ⑤ 属性值是函数`Function` ######

a. `'name':function`：执行函数`function`，取其返回值作为最终的属性值。函数的上下文为属性 ‘name’ 所在的对象。

###### ⑥ 属性值时正则表达式`RegExp` ######

a. `'name':regexp`：根据正则表达式`regexp`反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

##### 3. `Mock.mock`几种不同的格式 #####

###### ① `Mock.mock(template)` ######

> 根据数据模板生成模拟数据(不需要请求，可以直接用)

###### ② `Mock.mock(url,template)` ######

> 记录数据模板。当拦截到匹配的`url`的`Ajax`请求时，将根据数据模板`template`生成模拟数据，并作为响应数据返回。该方式任何请求方式都可以接收到（post/get/put/delete…）

###### ③ `Mock.mock(url,type,template)` ######

> 记录数据模板。当拦截到`url`和`type`的`Ajax`请求时，将根据数据模板`template`生成模拟数据，并作为相应数据返回

###### ④ `Mock.mock(url,function(options))` ######

> 记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

###### ⑤ `Mock.mock(url,type,function(options))`： ######

> 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。options指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性

##### 4. `Mock.setup(settings)` #####

> 1.  配置拦截`Ajax`请求时的行为，支持的配置项有`timeout`
> 2.  支持的配置项为`timeout`。
> 3.  `timeout`指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 ‘-’ 风格的字符串，例如 ‘200-600’，表示响应时间介于 200 和 600 毫秒之间。若不配置，默认值是’10-100’。

Mock.setup({ 
        timeout: 400//400ms后返回响应内容
    })
    Mock.setup({ 
        timeout: '200-600'//在该范围内随机生成响应时间，经过该响应时间后返回相应内容
    })

##### 5. `Mock.Random` #####

> `Mock.Random`的方法在数据模板中称为占位符。在下例中，Mock.mock(’@email’)相当于Random.email()

var Random = Mock.Random
    Random.email()
    // => "n.clark@miller.io"
    Mock.mock('@email')
    // => "y.lee@lewis.org"
    Mock.mock( {  email: '@email' } )
    // => { email: "v.lewis@hall.gov" }

###### ① `Mock.Random`的常见方法： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]

###### ② 可以为`Mock.Random`扩展方法，然后在数据模板中通过`@扩展方法`引用。 ######

Random.extend({ 
        constellation: function(date) { 
            var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
            return this.pick(constellations)
        }
    })
    Random.constellation()
    // => "水瓶座"
    Mock.mock('@CONSTELLATION')
    // => "天蝎座"
    Mock.mock({ 
        constellation: '@CONSTELLATION'
    })
    // => { constellation: "射手座" }

###### 6. `Mock.valid(template,data)` ######

> 检验真实数据`data`是否与数据模板匹配

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191116223935437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70