Vue中使用mock.js拦截Ajax 请求

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': '@cname',
17         'age|20-40': 25,
18         'gender|1': ['male', 'female']
19       }
20     ]
21   }
22 )

 注：这样的写法就是导入时执行该js文件，先让mock的接口生效，后面才能对ajax进行拦截