首先,需要安装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) })