Vue使用Mock拦截
// 注意:本文适用 VUE状态机的情况下使用 axios 发送请求,其他情况暂未测试
一、在vue项目中安装 Mock.js
npm i mockjs
二、在main.js同级目录新建mock.js文件
三、在main.js文件中引入刚刚新建的mock.js文件
require('./mock') //引入mock 拦截
四、在mock.js文件中引入安装好的 mock.js功能
const Mock = require('mockjs')
五、在使用VUE状态机的情况下使用 axios 发送请求,代码示例如下
//引入状态机
import {createNamespacedHelpers} from 'vuex'; //引入仓库中的数据必做的 引入vueX
const {mapGetters, mapMutations, mapState, mapActions} = createNamespacedHelpers('testStore'); // testStore 仓库名称
//使用 仓库中的事件
methods: {
...mapActions(['testRequest']), //引入请求方法
// mockBtn 为HTML中的事件
async mockBtn() {
let data = await this.testRequest('这是客户端传的参数');
//data 请求被拦截返回的数据, 真后台一样会返回该数据
console.log(data);
},
}
六、在VUE状态机中的请求, 代码示例如下
//actions 状态机仓库中的请求对象
actions: {
//Mock 拦截测试
async testRequest(context, payload){
// console.log(payload) // payload为客户端的传值
return await axios.post(`/api/test/mock`, {
// "/api/test/mock" 为请求的接口真实情况也是如此,
//我们只需要在后台完成时,将main.js中的mock 引入去掉即可
payload
})
},
},
七、在mock.js文件中拦截客户端发送的请求
//返回数据的方法主体
let mockTest = (msg) => {
console.log(msg) //msg为客户端传的值
//输出 {url: "/api/test/mock", type: "POST", body: "{"payload":"这是客户端传的参数"}"}
return {
// return 为要返回的数据,数据结构可自己定义,或用mock的方法生成,具体请参考mock官网
testData: {
name: '柳情',
age: 20,
sex: '女'
}
}
}
//要拦截的请求接口 //拦截请求方式(必须匹配) //返回数据的方法
Mock.mock('/api/test/mock', 'post', mockTest)
八、mock拦截成功之后的返回数据,展示如下
//返回的数据是在一个 大对象中的 data属性中, 这个data属性也是一个对象,我们要得真正的返回数据就是这个data了