vue-cli中使用mockjs拦截axios请求

一、准备工作

1.整理API文件

为了方便接口管理，统一放在src下的api文件夹中

//index.js
const api = {
    GET_TEST: 'api/getTest'
};
export default api;

2.挂载到main.js中的vue原型上

//main.js
import api from './api';
Vue.prototype.$api = api;

3.在src目录下创建环境接口配置文件

//bese-url.js

 * 输出接口baseUrl地址
 * @param {String} env 环境模式
 * @returns  {String} 环境模式对应的baseUrl
 */
export default function() {
    const env = process.env.NODE_ENV; //获取环境
    if (!env) {
        return '';
    }
    const envConfig = {
        development: 'http://localhost:8080/', //开发环境
        production: 'http://www.lihefei.com/' //生产环境
    };
    return envConfig[env];
}

4.配置axios的baseURL

axios封装在src目录中的http文件夹下，详细的封装就不写了，网上很多例子，这里只写与baseURL有关的配置

//index.js
import baseUrl from '@/utils/lib/base-url'; //导入bese-url模块
axios.defaults.baseURL = baseUrl(); //设置axios的默认baseURL 

二、配置mockjs

1.安装mockjs

在vscode中键入命令安装

cnpm install mockjs -D

2.创建mock文件夹

在src文件下新建mock文件夹及index.js，所有的mock统一处理

通配url版

index.js

import Mock from 'mockjs'; //导入mock模块
import api from '@/api'; //导入前面创建好的api(@为src目录，import的方式导入api模块默认会加载api/index.js)
import baseUrl from '@/utils/lib/base-url'; //导入前面创建的baseUrl模块

/**
 * 将字符串url转换为正则匹配
 * 转正则的原因：如果url是字符串类型，默认会完全匹配mock地址与应用请求地址，参数不同也会造成mock拦截失效，解决方式就是用正则匹配
 * @param {String} url 接口地址
 * @return {RegExp} 返回正则匹配规则
 */
function regUrl(url) {
	let urlStr = baseUrl() + url + '.*'; 
	return RegExp(urlStr);
}

//拦截接口，模拟接口数据
Mock.mock(regUrl(api.GET_TEST), /get|post/i, { 
    code: 0,
    msg: 'Mock接口模拟数据',
    data: [1, 2, 3, 4, 5]
});

匹配参数版

index.js

import Mock from 'mockjs'; //导入mock模块
import api from '@/api'; //导入前面创建好的api(@为src目录，import的方式导入api模块默认会加载api/index.js)
import baseUrl from '@/utils/lib/base-url'; //导入前面创建的baseUrl模块

// 将url参数转换为对象
const getParams = (url) => {
  try {
    url = url.match(/\?([^#]+)/)[1];
    const obj = {};
    const arr = url.split('&');
    for (let i = 0; i < arr.length; i++) {
      let subArr = arr[i].split('=');
      let key = decodeURIComponent(subArr[0]);
      let value = decodeURIComponent(subArr[1]);
      obj[key] = value;
    }
    return obj;
  } catch (err) {
    return null;
  }
};

// 拦截接口，模拟接口数据
// 在url最后加上.*然后用RegExp方法转换为正则表达式，解决get请求因带参数导致不能被匹配的问题
Mock.mock(RegExp(`${baseUrl()}${api.GET_TEST}.*`), /get|post/i, (options) => {
  let { type, url, body } = options;

  let data = null; // 请求参数
  if (type === 'GET') {
    url && (data = getParams(options.url)); // get请求的参数
  } else if (type === 'POST') {
    body && (data = JSON.parse(options.body)); // post请求的参数
  }

  console.log(data);

  return {
    code: 0,
    msg: 'Mock接口模拟数据',
    data: [1, 2, 3, 4, 5]
  };
});

3.在main.js中加载创建好的mock文件

//main.js
process.env.NODE_ENV != 'production' && require('./mock/index'); //如果是线上环境则不加载

三、vue业务应用

//test.vue
data() {
	return {
		list: []
	};
},
create() {
	const that = this;
	let params = { user: 'admin'};
	this.$http.get(this.$api.GET_TEST, params)
	.then((resolve, reject) => {
		if (resolve.code === 0) {
			that.list = resolve.data;
		}
		console.log(resolve);
	});
}