vue 使用mock来模拟数据

首先，需要安装mock

npm install mockjs --save-dev

在main.js中引入mock

mock文件写法如下：

const Mock = require('mockjs')
// 使用mockjs模拟数据
let data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1
  }]
})
Mock.mock('/api/data', 'get', (req, res) => {
  return {
    success: true,
    data: data,
    msg: '成功'
  }
})

在vue文件中调用接口进行测试

this.$get('/api/data')
      .then((response) => {
        console.log(response)
      })

页面打印结果如下

中途出现404，报错代码如下：

后面发现是axios进行了接口拦截，把这段代码注释掉或者在mock的返回参数中加上和拦截器对应的参数即可。

// 返回状态判断
axios.interceptors.response.use((res) => {
  if (!res.data.success) {
    return Promise.reject(res)
  }
  return res
}, (error) => {
  // 404等问题可以在这里处理
  return Promise.reject(error)
})