mock.js生成随机数据,拦截 Ajax 请求返回模拟的响应数据,让前端攻城师独立于后端进行开发。
开始使用吧。
1.npm下安装
1 npm install mockjs --save
2.在vue项目中创建mock.js
在mock.js中引入mockjs,添加一个login的接口如下:
1 import Mock from ‘mockjs‘
2
3 Mock.mock(‘/api/login‘,4 {5 ‘message‘: ‘success‘
6 }7 )
在使用mock.js的页面中引入mock.js,另外使用axios进行请求,因此也要引入
1 import axios from ‘axios‘
2 import ‘@/mock/mock‘
使用方法:
1 axios.get(‘/api/login‘)2 .then(res =>{3 console.log(res.data)4 })5 .catch(err =>{6 console.log(err)7 })
console显示如下:
3.为了更真实也可以给指定被拦截的 Ajax 请求的响应时间
在mock.js中添加
1 Mock.setup({2 timeout: 3000
3 })
可以看到刷新页面3s之后才有返回。
4.mock.js能支持各种格式的数据,参考官网 http://mockjs.com/
示例中/api/user就用mock.js模拟了随机返回几个用户信息列表的接口。
mock.js完整代码如下:
1 import Mock from ‘mockjs‘
2
3 Mock.setup({4 timeout: 1000
5 })6 Mock.mock(‘/api/login‘,7 {8 ‘message‘: ‘success‘
9 }10 )11
12 Mock.mock(‘/api/user‘,13 {14 ‘array|1-10‘: [15 {16 ‘name‘: [email protected],17 ‘age|20-40‘: 25,18 ‘gender|1‘: [‘male‘, ‘female‘]19 }20 ]21 }22 )
注:这样的写法就是导入时执行该js文件,先让mock的接口生效,后面才能对ajax进行拦截
原文:https://www.cnblogs.com/jyughynj/p/12177279.html