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

你的名字 2023-02-27 12:21 26阅读 0赞

# 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'
    })