vue 使用Mock的详细讲解

原理

在引入了Mock之后，mock.js内部会创建一个MockXMLHttpRequest来替代原生的XMLHttpRequest，如果有原生的XHR请求来，则拦截，替换成MockXMLHttpRequest对象，然后再匹配对应的url，如果没有，就发送网络请求。

以下是部分源码:

注意（重写的XHR有bug）

1. 将cookie丢失。（气人：我家项目登录状态用的就是cookie，排查半天才盘查出来...）

以下是封装好的，直接cv用，记得 放入到main.js 里面

data.js文件

 export default {
    // 营收对账单列表  
    'newfinance/bill/platform':{
        'list|1-10':[
            {
                'date': "2020-11-12",
                'id|+1': 1,
                'income|100-10000': 1,
                'outgo|100-10000': 1,
                'revenue_summary|100-10000': 1,
            }
        ]
    },
    
}

创建mock mock.js文件

import data from './data'

function Init() {
    this.Mock = this.setMock();
    this.data = data;
}

Init.prototype.setMock = function () {
    let Mock = require('mockjs')

    // mockjs 导致请求cookie丢失补丁
    Mock.XHR.prototype.__send = Mock.XHR.prototype.send
    Mock.XHR.prototype.send = function () {
        if (this.custom.xhr)
            this.custom.xhr.withCredentials = this.withCredentials || false
        this.__send.apply(this, arguments)
    }
    return Mock
}
Init.prototype.creatMock = function () {
    for (let key in this.data) {
        const mockReg = this.creatRegExp( key );

        this.Mock.mock(mockReg, (option) => {
            return this.creatMockData(this.data[key], option);
        })
    }
}
Init.prototype.creatRegExp = function ( key)  {
    return new RegExp( key.replace(/\//g, '\\\/') ) ;
}
Init.prototype.creatMockData = function ( data ) {
    let temp = null;
    temp = this.Mock.mock({
        error: 0,
        ...data
    })
    return temp 
}



new Init().creatMock() ;

mockjs官方文档, 好久不更新了(`2016年截至`)，会出bug，

1. bug1，会导致请求cookie丢失，文章上有补丁