Vue使用Mock拦截

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了