mock.js学习之Mock.mock()&Mock.setup()使用_篇3

Mock.mock()

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

根据数据模板生成模拟数据
rurl： 可选
表示需要拦截的 URL，可以是 URL 字符串 或 URL 正则，如

/\domain\/list\.json/
'/domain/list.json'

rtype： 可选
表示需要拦截的 AJAx 请求类型，如 get/post/put/delete 等
template： 可选
表示数据模板，可以是对象或字符串，例如 { data|1-10': [{}] } 、@EMAIL
function(options)： 可选
表示用于生成响应数据的函数
options
指向本次请求的 Ajax 选项集，含有 url、type、body 三个属性。

Mock.mock(template)

根据数据模板生成模拟数据

var data = Mock.mock({
    'title': 'haha',
    'author|1-4': /[a-z][A-Z][0-9]/
})
console.log(JSON.stringify(data))
=>
{"title":"haha","author":"wF5aO1cW1"}

Mock.mock(rurl, template)

记录数据模板，当拦截到匹配 rurl 的 ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回

Mock.mock('/user/test', {
    code: 200,
    data: {
        name: {
            first: '@FIRST',
        }
    }
})

this.$axios.get('/user/test').then(res => {
        console.log(res.data)
      })
=>
{code: 200, data: {name: {first: "Frank"}}}

Mock.mock(rurl, function(options))

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

Mock.mock('/user/test', options => {
    return {code:200, options}
})

this.$axios({url:'/user/test', data:{'name|1-4': 'ha'}}).then(res => {
  console.log(res.data)
 })

=>
{
	code: 200
	options: {
		body: "{"name|1-4":"ha"}"
		type: "GET"
		url: "/user/test"
	}
}

Mock.mock(rurl, rtype, template)

记录数据末班，当拦截到匹配 rurl 和 rtype 的 ajax 请求时，将根据数据末班 template 生成模拟数据，并作为响应数据返回

Mock.mock('/user/test', 'get', {
    code: 200,
    data: {
        name: 'xixi'
    }
})

this.$axios.get('/user/test').then(res => {
   console.log(res.data)
 })
=>
{
	code: 200
	data: {
		name: "xixi"
	}
}

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

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

Mock.mock('/user/test', 'get', option => {
    return option
})

this.$axios({url:'/user/test', data: {'name':'haha'}}).then(res => {
   console.log(res.data)
 })
 =>
{
	body: "{"name":"haha"}"
	type: "GET"
	url: "/user/test"
}

Mock.setup()

Mock.setup(settings)
配置拦截 ajax 请求时的行为，支持的配置项有 ： tiimeout

settings

必选，配置项集合

timeout

可选，指定被拦截的 ajax 请求的响应时间，单位是毫秒。值可以是正整数，如 400，表示 400 毫秒后才会返回响应内容，也可以是横杠- 风格的字符串，如 200-600，表示响应时间介于 200和600毫秒之间。默认值是 10-100

Mock.setup({
	timeout: 400
})

Mock.setup({
	timeout: '200-600'
})