mock模拟get,post请求方式

♀尐吖头ヾ 提交于 2019-12-08 09:33:59

1.模拟get请求

//模拟get请求
Mock.mock('/api/getGoods','get',{
	status:200,
	message:'获取列表成功',	
	//随机生成5-8条数据
	'data|5-8':[{
		id:'@increment()',  //生成自增的id
		//'id|+1':1,  //也是模拟自增的id
		name:'@cword(3,5)',  //生成3-5个汉字
		price:'@natural(10,20)',  //生成10-20之间的任意数字
		count:'@natural(10,20)',
		img:'@dataImage(250x250)'  ,//生成指定宽高的image图片,建议使用dataImage
	}]
})

2.模拟post请求

//模拟post请求,外层的Mock只负责拦截接口和方法的定义
Mock.mock('/api/addGoods','post',function(option){
	//请求相关的参数
	console.log(option)
	//模拟假数据需要重新写Mock
	return Mock.mock({
		status:200,
		message:'@cword(4,9)'
	})
})

3.模拟根据不同的id值获取对应的数据,接口可以放正则表达式

Mock.mock(/\/api\/getGoodsList/,'get',function(option){
	console.log(option)	
	//通过正则表达式提取到url后面的id
	let id = /\/api\/getGoodsList\/(\d+)/.exec(option.url)
	console.log(id)
	
	return Mock.mock({
		status:200,
		message:'获取商品成功',
		data:[{
			id:id[1]-0,
			name:'@constellation',  //自定义扩展mock函数
			price:5,
			count:10
		}]
	})
})

4.创建自定义mock函数

首先引入Random

import Mock,{Random} from 'mockjs';

//创建自定义mock函数
Random.extend({
	//自定义函数名字:处理函数,不要写成箭头函数,因为内部有this
    constellation: function(date) {
		//定义数组
        let constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
		//随机返回数组中的数组
        return this.pick(constellations)
    }
})

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!