阅读 128

前端扩展 - 优秀的 Mock.js

前端开发过程中免不了出现等接口的情况,而静态 JSON 不足以体现前端高大上的逼格,是时候拿出 mock.js 了,众多在线 Mock API 都是使用的 mock.js 语法哦

Mock.js简介

Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。

示例:mockjs.com/examples.ht… 文档:mockjs.com/0.1/

功能:

  1. 基于 数据模板 生成 模拟数据;
  2. 类型丰富的 随机数据
  3. 模拟 Ajax 请求

个人应用:

使用 Koa 和 mockjs 搭建的本地服务

个人仓库:mock-server,开箱即用,喜欢可以 star ^ _ ^

语法规范

Mock.js 的语法规范包括两部分:

  1. 数据模板定义(Data Temaplte Definition,DTD)
  2. 数据占位符定义(Data Placeholder Definition,DPD)

数据模板定义 DTD

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

属性名|生成规则:属性值
'name|rule': value
复制代码

生成规则

  • 属性名 和 生成规则 之间用 | 分隔。

  • 生成规则 是可选的。

  • 生成规则 有 7 种格式:

    1. 'name|min-max': value
    2. 'name|count': value
    3. 'name|min-max.dmin-dmax': value
    4. 'name|min-max.dcount': value
    5. 'name|count.dmin-dmax': value
    6. 'name|count.dcount': value
    7. 'name|+step': value
    复制代码
  • 生成规则的含义需要依赖 属性值 才能确定。

  • 属性值中可以含有 @占位符

  • 属性值还指定了最终值的初始值和类型。

String : 属性值为字符串

  • 'name|min-max': string

重复字符串 string 生成一个字符串,重复次数大于等于 min,小于等于 max

// 生成 1 ~ 10 个 "★"
Mock.mock({
  "string|1-10": "★"
})

// ==> 
{ "string": "★★★★" }
复制代码
  • 'name|count': string

重复字符串 string 生成一个字符串,重复次数等于count

// 重复 "String" 3 次
Mock.mock({
  "string|3": "String",
})

// ==> 
{ "string": "StringStringString" }
复制代码

Number : 属性值为数字

  • 'name|min-max': number

生成一个大于等于 min、小于等于 max 的整数,属性值 number只用来确定Number类型

// 生成一个整数,区间:[1,10]
Mock.mock({
  "number|1-10": 100
})

// ==> 
{ "number": 6 }
复制代码
  • 'name|min-max.dmin-dmax': number

生成一个浮点数,整数部分大于等于min、小于等于 max,小数部分保留 dmin 到 dmax 位,属性值 value 只用来确定Number类型

// number1: 生成一个小数,整数区间:[1,10], 小数部分保留 2 到 4 位
// number2: 生成一个小数,整数部分为10, 小数部分保留 2 到 4 位
// number3: 生成一个小数,整数部分为10, 小数部分保留 2 位
Mock.mock({
  "number1|1-10.2-4": 100,
  "number2|10.2-4": 100,
  "number3|10.2": 100,
})

// => 
{ 
	"number1": 6.123, 
	"number2": 10.2884,
	"number3": 10.68,
}

复制代码
  • 'name|+step': number

属性值以 step 递增,初始值为 number, step不能为负值

tip: 官网示例关于Number的这一条示例没看懂,摸不清Result的刷新规则,但对于数组中应从此规则是很好理解的,示例如下:

// 生成一个数组list, 每一项的id 自增 5 ,初始值为100
Mock.mock({
  "list|3": [
  	{"id|+5": 100}
  ],
})

// => 
{"list": [
    {id: 100},
    {id: 105},
    {id: 110},
]}
复制代码

Boolean:属性值为布尔值

  • 'name|1': boolean

随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2

// 生成一个布尔值, 1/2为true, 1/2为false
Mock.mock({
  	"boolean|1": true,
})

// => 
{ "boolean": false }
复制代码
  • 'name|min-max': boolean

随机生成一个布尔值,值为 boolean 的概率是 min / (min + max),值为 !boolean 的概率是 max / (min + max)

// 生成一个布尔值, 1/3为false, 2/3为true
Mock.mock({
   	"boolean|1-2": false,
})

// => 
{ "boolean": false }
复制代码

Object:属性值为对象 Object

  • 'name|min-max': object

从属性值 object 中随机选取 min 到 max 个属性。

// 生成一个对象, 包含 1 ~ 2 个属性
Mock.mock({
  "object|1-2": {
    "name": "code",
    "gender": 1,
    "age": 18,
    "tel": "18911112222"
  }
})

// => 
{object: {
	"name": "code",
}}
复制代码
  • 'name|count': object

从属性值 object 中随机选取 count 个属性。


// 生成一个对象, 包含 2 个属性
Mock.mock({
  "object|2": {
    "name": "code",
    "gender": 1,
    "age": 18,
    "tel": "18911112222"
  }
})

// => 
{object: {
	"name": "code",
	"age": 18,
}}
复制代码

Array : 属性值为数组

  • 'name|1': array

从属性值 array 中随机选取 1 个元素,作为最终值

Mock.mock({
  "array|1": [1,2,3,4]
})

// => 
{ array: 1 }
复制代码
  • 'name|count': array

通过重复属性值 array 生成一个新数组,重复次数为 count

Mock.mock({
  "array1|2": [1,2,3],
  "array2|2": [{a:1},2],
})

// => 
{
    array1: [ 1, 2, 3, 1, 2, 3 ],
    array2: [ {a:1}, 2, {a:1}, 2 ]
}
复制代码
  • `'name|min-max': array

通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max

Mock.mock({
  "array|1-3": [{id:1, name: 2}],
})

// => 
{array1: [ 
	{id:1, name: 2}, 
	{id:1, name: 2} 
]}
复制代码
  • 'name|+step': array

从下标 0 的位置循环取出array中的元素, 下标以 step 递增并对 array.length 取余

Mock.mock({
  "array|4": [{
      "number|+1": [2,4]
  }]
})

// => 
{array: [
    { number: 2},
    { number: 4},
    { number: 2},
    { number: 4}
]}
复制代码

Function:属性值为函数

  • 'name': function(){}

取函数返回值作为最终的属性值,上下文为 'name' 所在的对象。

Mock.mock({
  'firstName': 'Guoda',
  'name': function() {
    var nameObj =  Mock.mock({
      'firstName': 'Jason',
      'lastName': 'Statham',
      'name': function() {
      	// 这里的 this.firstName 会取到 'Jason' 而不会取到 'Guoda'
        return this.firstName + " " +this.lastName;
      }
    })
	return nameObj.name
  }
})

// => 
{
	"firstName": "Guoda",
	"name": "Jason Statham"
}
复制代码

RegExp: 属性值为正则表达式

  • 'name': regexp
Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/,
  'regexp2': /\d{5,10}/
  'regexp3|1-5': /\d{5,10}\-/,
  'regexp4|3': /\d{2,4}\*/
})

// => 
{
    "regexp1": "cD3",
    "regexp2": "54833",
    "regexp3": "597425-8412964-5862207-7615212-051289-582018-",
    "regexp4": "374*1397*88*027*",
}
复制代码

Path: 属性值通过路径获取

  • Relative Path 相对路径

相对于当前属性名的路径

var relativePathData = Mock.mock({
  "foo": "Hello",
  "nested": {
    "a": {
      "b": {
        "c": "Mock.js"
      }
    }
  },
  "relativePath": {
    "a": {
      "b": {
        "c": "@../../../foo @../../../nested/a/b/c"
      }
    }
  }
})
console.log(relativePathData.relativePath)
// => 
"Hello Mock.js"
复制代码
  • Absolute Path 绝对路径

最外层为根路径

var absolutePathData = Mock.mock({
  "foo": "Hello",
  "nested": {
    "a": {
      "b": {
        "c": "Mock.js"
      }
    }
  },
  "absolutePath": "@/foo @/nested/a/b/c"
})
console.log(absolutePathData.absolutePath)
// => 
"Hello Mock.js"
复制代码

数据占位符定义 DPD

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中

  1. 用 @ 来标识其后的字符串是 占位符
  2. 占位符 引用的是 Mock.Random 中的方法,建议引用时 方法名 全大写,以便在阅读时从视觉上提高占位符的识别度,快速识别占位符 和 普通字符
  3. 通过 Mock.Random.extend() 来扩展自定义占位符
  4. 占位符 也可以引用 数据模板 中的属性
  5. 占位符 会优先引用 数据模板 中的属性
  6. 占位符 支持 相对路径绝对路径
// @FIRST 和 @first 均可调用 Mock.Random.first(), 使用大写易于区分占位符和字符串
Mock.mock({
     "name": {
         first: '@FIRST', 	// @FIRST 引用 Mock.Random.first()
         last: '@LAST',		// @LAST 引用 Mock.Random.last()
         full: '@first @last' // @first 优先引用数据模版的属性(this.first)
     }
 })
 // =>
 {"name": {
     "first": "Charles",
     "last": "Lopez",
     "full": "Charles Lopez"
 }}
复制代码

综合示例


Mock.mock({
  "list|10": [
    {
      "id": "@GUID",
      "first": "@CFIRST",
      "last": "@CLAST",
      "name": "@first@last",
      "age|10-60": 1,
      "gender": "@pick([1,2])",
      "say": function(){
          return "my name is " + this.name;
      }
    }
  ]
})
复制代码

Mock.Random

Mock.Random 是一个工具类,用于生成各种随机数据,调用方式有2种:

// 1. 直接调用 Matn.random 方法
var Random = Mock.Random;
Random.boolean()
Random.boolean(1, 9, true)

// 2. 数据占位符调用
Mock.mock('@boolean')
Mock.mock('@boolean()')
Mock.mock('@boolean(1, 9, true)')
复制代码

自定义占位符

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

Basics

boolean:布尔值

  • Random.boolean(min?, max?, current?)

参数说明参见 数据模版定义-Boolean

natural:自然数(大于等于 0 的整数)

  • Random.natural( min?, max? )

参数 min:可选。指示随机自然数的最小值。默认值为 0。

参数 max:可选。指示随机自然数的最小值。默认值为 9007199254740992。

integer:整数(包含负数)

  • Random.integer( min?, max? )

参数 min:可选。指示随机整数的最小值。默认值为 -9007199254740992。

参数 max:可选。指示随机整数的最大值。默认值为 9007199254740992。

float:浮点数

  • Random.float( min?, max?, dmin?, dmax? )

参数 min:可选。整数部分的最小值。默认值为 -9007199254740992。

参数 max:可选。整数部分的最大值。默认值为 9007199254740992。

参数 dmin:可选。小数部分 位数 的最小值。默认值为 0。

参数 dmin:可选。小数部分 位数 的最大值。默认值为 17。

character:单个字符

  • Random.character( pool? )

参数 pool:可选。字符串。表示字符池,将从中选择一个字符返回。

如果传入 'lower''upper''number''symbol',表示从内置的字符池从选取。

如果未传入该参数,则从 'lower' + 'upper' + 'number' + 'symbol' 中随机选取一个字符返回。

内置字符池:
lower: "abcdefghijklmnopqrstuvwxyz",
upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
number: "0123456789",
symbol: "!@#$%^&*()[]"
复制代码

string:字符串

  • Random.string( pool?, min?, max? )

参数 pool:可选。字符串。释义同上字符。

参数 min:可选。随机字符串的最小长度。默认值为 3。

参数 max:可选。随机字符串的最大长度。默认值为 7。

range:整型数组

  • Random.range(stop)

一个参数:表示数组中整数的结束值(不包含在返回值中)

  • Random.range(start?, stop, step?)

参数 start:可选。数组中整数的起始值,默认值为 0。

参数 stop:必选。数组中整数的结束值(不包含在返回值中)。

参数 step:可选。数组中整数之间的步长,默认值为 1。

// 一个参数表示结束值
Random.range(10)
// => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 多参数
Random.range(3, 7)
// => [3, 4, 5, 6]
Random.range(1, 10, 2)
// => [1, 3, 5, 7, 9]
Random.range(1, 10, 3)
// => [1, 4, 7]
复制代码

Date

参数 format:可选。格式化生成的日期字符串。默认值为 yyyy-MM-dd。可选值参照 date-format

date:日期字符串

  • Random.date( format? )

time:时间字符串

  • Random.time(format?)

datetime:随机的日期和时间字符串

  • Random.datetime( format? )

now:当前的日期和时间字符串

  • Random.now( unit?, format? )

参数 unit:可选。表示时间单元,用于对当前日期和时间进行格式化。

​ 可选值有:yearmonthweekdayhourminutesecondweek,默认不会格式化。

参数 format:可选。指示生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ss

Random.now()
// => "2018-11-09 10:28:53"

// Ranndom.now( unit )
    Random.now('year')
    // => "2018-01-01 00:00:00"
    Random.now('month')
    // => "2018-11-01 00:00:00"
    Random.now('week')
    // => "2018-11-04 00:00:00"
    Random.now('day')
    // => "2018-11-09 00:00:00"
    Random.now('hour')
    // => "2018-11-09 20:00:00"
    Random.now('minute')
    // => "2018-11-09 20:08:00"
    Random.now('second')
    // => "2018-11-09 20:08:38"

// Ranndom.now( unit, format )
	Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')
	// => "2018-11-09 00:00:00 000"
复制代码

Image

image:图片URL

  • Random.image( size?, background?, foreground?, format?, text? )

参数 size:可选。指示图片的宽高,格式为 '宽x高'。默认从下面的数组中随机读取一个

[
    '300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', 
    '234x60', '88x31', '120x90', '120x60', '120x240', '125x125', '728x90', 
    '160x600', '120x600', '300x600'
 ]
复制代码

参数 background:可选。图片的背景色(16进制颜色)。默认值为 '#000000'。使用英文单词(red等)表示颜色无效

参数 foreground:可选。图片的前景色(文件)。默认值为 '#FFFFFF'。使用英文单词(red等)表示颜色无效

参数 format:可选。指示图片的格式。默认值为 'png',可选值包括:'png'、'gif'、'jpg'。

参数 text:可选。指示图片上的文字(中文无效)。默认为参数 size(尺寸大小 eg:200x100)。

Random.image('200x100', '#FF0000', '#FFF', 'png', 'text')
// =>
"https://dummyimage.com/200x100/FF0000/FFF.png&text=text"
复制代码

dataImage:base64图片

  • Random.dataImage( size?, text? )

图片的背景色是随机的,取值范围参考自 brandcolors.net/

Color

color:'#RRGGBB'

  • Random.color()

返回16进制颜色('#RRGGBB')

hex : '#RRGGBB'

  • Random.hex()

返回16进制颜色('#RRGGBB')

rgb:'rgb(r, g, b)'

  • Random.rgb()

rgba:'rgb(r, g, b, a)'

  • Random.rgba()

hsl:'hsl(h, s, l)'

  • Random.hsl()
Random.color()
// => "#f279c3"
Random.hex()
// => "#7988f2"
Random.rgb()
// => "rgb(242, 184, 121)"
Random.rgba()
// => "rgba(242, 121, 164, 0.58)"
Random.hsl()
// => "hsl(286, 82, 71)"
复制代码

Text

paragraph:英文段落(多条句子)

  • Random.paragraph( len )

参数 len:可选。指示文本中句子的个数。默认值为 3 到 7 之间的随机数。

  • Random.paragraph( min?, max? )

参数 min:可选。指示文本中句子的最小个数。默认值为 3。

参数 max:可选。指示文本中句子的最大个数。默认值为 7。

sentence:一个英文句子

随机生成一个句子,第一个的单词的首字母大写。

  • Random.sentence( len )

参数 len:可选。指示句子中单词的个数。默认值为 12 到 18 之间的随机数。

  • Random.sentence( min?, max? )

参数 min:可选。指示句子中单词的最小个数。默认值为 12。

参数 max:可选。指示句子中单词的最大个数。默认值为 18。

word:英文单词

  • Random.word( len )

参数 len:可选。指示单词中字符的个数。默认值为 3 到 10 之间的随机数。

  • Random.word( min?, max? )

参数 min:可选。指示单词中字符的最小个数。默认值为 3。

参数 max:可选。指示单词中字符的最大个数。默认值为 10。

Random.word()
// => "fzljqtu"
复制代码

title:标题

随机生成一句标题,其中每个单词的首字母大写。

  • Random.title( len )

参数 len:可选。指示标题中单词的个数。默认值为 3 到 7 之间的随机数。

  • Random.title( min?, max? )

参数 min:可选。指示标题中单词的最小个数。默认值为 3。

参数 max:可选。指示标题中单词的最大个数。默认值为 7。

Random.title()
// => "Odd Krdote Tidnsovvr Gcljiwzk Gtbckxopbg Vhfr"
复制代码

cparagraph:中文段落

参数同 paragraph

  • Random.cparagraph( len )

  • Random.cparagraph( min?, max? )

Random.cparagraph()
// => "科叫强上全六党争很温素通。增精老新节劳人要格原山设总。可京条眼作少空么属气众原并是结型。社马高率主约样明只事过且往除。"
复制代码

csentence:中文句子

参数同 sentence

  • Random.cparagraph( len )
  • Random.cparagraph( min?, max? )
Random.csentence()
// => "气想指选价领金高每提实式转。"
复制代码

cword:汉字

  • Random.cword(pool?)
  • Random.cword(pool?, length?)
  • Random.cword( pool?, min?, max? )
  • Random.cword(length?)
  • Random.cword(min, max)

参数 pool:可选。字符串。表示字符池,将从中选择汉字返回(可重复选择)。

参数 length:可选。指示随机汉字的长度,默认值为 1。

参数 min:可选。指示随机汉字的最小长度。

参数 max:可选。指示随机汉字的最大长度。

// Random.cword()
Random.cword()
// => "况"

// Random.cword( pool )
Random.cword('零一二三四五六七八九十')
// => "十"

// Random.cword( length )
Random.cword(3)
// => "万为此"

// Random.cword( pool, length )
Random.cword('零一二三四五六七八九十', 3)
// => "五三六"

// Random.cword( min, max )
Random.cword(3, 5)
// => "眼克好金少"

// Random.cword( pool, min, max )
Random.cword('零一二三四五六七八九十', 5, 7)
// => "二五五八三六"
复制代码

ctitle:中文标题

  • Random.ctitle(length?)
  • Random.ctitle(min, max)

参数 length:可选。指示随机标题的长度。

参数 min:可选。指示随机标题的最小长度,默认值为3。

参数 max:可选。指示随机标题的最大长度,默认值为7。

Random.ctitle(3, 5)
// => "路属改往"
复制代码

Name

first:英文名

  • Random.first()

随机生成一个常见的英文名。

last:英文姓

  • Random.last()

随机生成一个常见的英文姓。

name:英文姓名

  • Random.name( middle? )

随机生成一个常见的英文姓名。

参数 middle:可选。布尔值。指示是否生成中间名。

Random.name()
// => "Larry Wilson"
Random.name(true)
// => "Helen Carol Martinez"
复制代码

cfirst:中文姓

  • Random.cfirst()

随机生成一个常见的中文姓氏。

clast:中文名

  • Random.clast()

随机生成一个常见的中文名。

cname:中文姓名

  • Random.cname()
Random.cname()
// => "薛静"
复制代码

Web

url:url地址

  • Random.url()
Random.url()
// => "gopher://qmug.sh/uprwjbph"
复制代码

domain:域名

  • Random.domain()
Random.domain()
// => "ynadsh.tj"
复制代码

protocal:协议

  • Random.protocol()
Random.protocol()
// => "http"
复制代码

tld:顶级域名

  • Random.tld()
Random.tld()
// => "nz"
复制代码

ip

  • Random.ip()
Random.ip()
// => "97.167.99.146"
复制代码

email:邮箱

  • Random.email()
Random.email()
// => "t.tfiktg@krrsjpfs.mil"
复制代码

Address

region:大区

  • Random.region()

随机生成一个(中国)大区。

Random.area()
// => "华北"
复制代码

province:省(或直辖市、自治区、特别行政区)

  • Random.province()
Random.city()
// => "安徽省"
复制代码

city:城市

  • Random.city( prefix? )

参数 prefix:可选。布尔值。指示是否生成所属的省。默认值为 false。

Random.city()
// => "海东市"
Random.city(true)
// => "吉林省 吉林市"
复制代码

county:县(区)

  • Random.county( prefix? )

参数 prefix:可选。布尔值。指示是否生成所属的省、市。默认值为 false。

Random.county()
// => "永胜县"
Random.county(true)
// => "河南省 安阳市 龙安区"
复制代码

zip:邮政编码

  • Random.zip()

随机生成一个邮政编码(六位数字)

Random.zip()
// => "139862"
复制代码

Helper:工具类

capitalize:首字母大写

  • Random.capitalize( word )
Random.capitalize( 'hello' )
// => "Hello"
复制代码

upper:大写转换

  • Random.upper( str )
Random.upper('hello WORld')
// => "HELLO WORLD"
复制代码

lower:小写转换

  • Random.lower( str )
Random.lower('HELLO WorLD')
// => "hello world"
复制代码

pick:元素选取

  • Random.pick( arr )

从数组中随机选取一个元素,并返回

Random.pick(['a', 'e', 'i', 'o', 'u'])
// => "o"
复制代码

shuffle:打乱

  • Random.shuffle( arr )

打乱数组中元素的顺序,并返回。

Random.shuffle(['a', 'e', 'i', 'o', 'u'])
// => ["i", "u", "a", "o", "e"]
复制代码

Miscellaneous:杂项

guid:随机标识符

  • Random.guid()

随机生成一个 GUID。Random.guid() 的实现参考了 UUID 规范

Random.guid()
// => "8Dc8DA10-3FDe-FFc8-3AD6-703bdeFff0D8"
复制代码

id:18 位身份证。

  • Random.id()
// 随机生成一个 18 位身份证。
Random.id()
// => "620000201010107263"
复制代码

increment:自增整数

  • Random.increment( step? )

参数 step:可选。整数自增的步长。默认值为 1。起始值为0。

生成一个 全局 的自增整数。

全局变量!!!

// 仔细观察每次调用 Random.increment 后的返回值
Random.increment()
// => 1 (0+1)
Random.increment()
// => 2 (1+1)
Random.increment(100)
// => 102 (2+100)
Random.increment()
// => 103 (102+1)
复制代码

Mock.mock()

Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求

当前版本只能拦截Ajax请求,故对此方法不做过多记录,有兴趣的同学可以查看 官方文档

Mock.mock( rurl?, rtype?, template|function( options ) )

  • Mock.mock( template )
  • Mock.mock( rurl, template )
  • Mock.mock( rurl, function(options) )
  • Mock.mock( rurl, rtype, template )
  • Mock.mock( rurl, rtype, function(options) )

参数 rurl:可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。

​ 例如 /\/domain\/list\.json/'/domian/list.json'

参数 rtype:可选。表示需要拦截的 Ajax 请求类型。

​ 例如 GETPOSTPUTDELETE 等。

参数 template:可选。表示数据模板,可以是对象或字符串。

​ 例如 { 'data|1-10':[{}] }'@EMAIL'

参数 function(options):可选。表示用于生成响应数据的函数。

参数 options:指向本次请求的 Ajax 选项集。

​ 含有 urltypebody 三个属性,参见 XMLHttpRequest 规范


// Mock.mock( rurl, rtype, template )
Mock.mock(/\.json/, 'post', {
    'list|1-10': [{
        'id|+1': 1,
        'email': '@EMAIL'
    }]
})
$.ajax({
    url: 'list.json',
    type: 'post',
    dataType: 'json'
}).done(function (data, status, jqXHR) {
    console.log(data)
})

复制代码

Mock.setup(settings )

参数settings:必选。指示配置项对象。配置拦截 Ajax 请求时的行为。

Mock.setup( settings ) 仅用于配置 Ajax 请求,同上,有兴趣的同学可以查看 官方文档

settings:配置项

timeout

可选。指定被拦截的 Ajax 请求的响应时间,单位是毫秒。

值可以是正整数,例如 400,表示 400 毫秒 后才会返回响应内容

也可以 '200-600',表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})
复制代码
文章分类
前端