MOCK在VUE项目中的使用

服务端小伙伴的电脑中病毒，代码全部丢失，导致我们没办法进度同步，才给了我一次实践mock的机会，心痛！

环境描述

vue项目、抽了一个request的工具包

//request.js

import axios from 'axios'
/**
 * axios
 * @param url
 * @param token
 * @param params
 * @param method
 * @param removeLoading
 * @param allowRepeat
 * @returns {Promise<unknown>}
 */
function request(url, token, params, method) {
    // let host = 'https://********'
    let host = ''
    let _method = 'post'
    if (typeof(method) !== 'undefined') {
        _method = method
    }
    console.log(params)
    return new Promise((resolve, reject) => {
        axios({
            method: _method,
            url: host + url,
            params: params,
            headers: {
                'content-type': method == 'get' ? 'application/json' : 'application/x-www-form-urlencoded',
                'Accept': 'application/json',
                'token': token
            }
        }).then(function(res) {
            if (res.status === 200) {
                resolve(res.data)
            } else {
                // this.$Message.error(res.statusCode)
            }
        }).catch(function(error){
            reject(error);
        });
    })

}

export default request

处理方法

假设已经搭建好vue项目，接下来：

1. 安装mock

npm install mockjs --save-dev

2. 在src文件夹下新建mock文件夹，并创建index.js

//  src/mock/index.js

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

3. 在mock文件夹下创建js文件，例如sendCode.js

// sendCode.js

let demoList = {
    status: 200,
    message: 'success'
};
export default {
    'post|/user/sendCode': demoList
}

重新启动项目就OK啦~

PS：之前存在的问题是，当request.js文件下的host变量如果有原本的接口请求地址时，mock就不起作用，得把host变量置空字符串即可，记得正式发布时要改回来。为服务端小伙伴祈福，祝你电脑永不中毒，代码再无bug，上线从来不垮，服务永远不崩................呜呜呜

参考：vue使用mock配置步骤