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

mock.js可以生成随机数据，拦截 Ajax 请求返回模拟的响应数据，让前端攻城师独立于后端进行开发。

开始使用吧。

1.npm下安装

npm install mockjs --save

2.在vue项目中创建mock.js

 

 在mock.js中引入mockjs，添加一个login的接口如下：

import Mock from 'mockjs'

Mock.mock('/api/login',
  {
    'message': 'success'
  }
)

在使用mock.js的页面中引入mock.js，另外使用axios进行请求，因此也要引入

import axios from 'axios'
import '@/mock/mock'

使用方法：

axios.get('/api/login')
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.log(err)
  })

console显示如下：

 

3.为了更真实也可以给指定被拦截的 Ajax 请求的响应时间

在mock.js中添加

Mock.setup({
  timeout: 3000
})

可以看到刷新页面3s之后才有返回。

4.mock.js能支持各种格式的数据，参考官网 http://mockjs.com/

示例中/api/user就用mock.js模拟了随机返回几个用户信息列表的接口。

mock.js完整代码如下：

import Mock from 'mockjs'

Mock.setup({
  timeout: 1000
})
Mock.mock('/api/login',
  {
    'message': 'success'
  }
)

Mock.mock('/api/user',
  {
    'array|1-10': [
      {
        'name': '@cname',
        'age|20-40': 25,
        'gender|1': ['male', 'female']
      }
    ]
  }
)

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