easy-mock能实现部分接口用真数据么
来源：4-12 Mock设置（1）
JY_Kong
2020-03-27
在实际项目中会遇到这样的问题：就是一个项目有很多接口、很多需求，但是我们当前开发需要关注的就只有几个接口，所以如果想实现，那些无关的接口使用真实的接口数据，而当前开发需要调试的那几个接口就使用easy-mock数据，这个要怎么才能实现呢？
我试过配置了axios.defaults.baseURL，但是一配置这个，要么就全部使用了真实数据，要么就全部使用了easy-mock的数据，所以觉得这个是改动“全局”的，不能解决以上问题。
请教一下老师，有没有能解决的方法～
2回答
-
有。你这个问题提的非常好，现实工作当中确实会有这种情况，局部部分新开发接口需要做mock，其它接口对接线上。那我个人的经验和做法：
需要重新封装一下axios插件，从新定义一个新的方法比如request，接受请求的方法和参数，在request里面调用axios，这样我们就能根据传进来的参数判断是走真实接口还是mock。012020-03-28 -
河畔一角
2020-03-28
//axios.js文件
export default {
request(url,data={},options={loading:true,mock:false}){
let loading = document.getElementById('ajaxLoading');
if (options.loading){
loading.style.display = 'block';
}
let baseApi = '/api';
//局部mock
if(options.mock){
// 一、直接加载mock文件
require('./mock/api');
// 二、对接easy-mock
baseApi = 'https://www.easy-mock.com/mock/5dc7afee2b69d9223b633cbb/mimall'
}
return new Promise((resolve,reject)=>{
axios({
url:url,
method:options.method || 'get',
baseURL:baseApi,
timeout:options.timeout || 5000,
params: data
}).then((response)=>{
if (options.loading) {
loading.style.display = 'none';
}
if (response.status == '200'){
let res = response.data;
if (res.code == '0'){
resolve(res.data);
}else{
Message.error(res.msg);
}
}else{
reject(response.data);
}
}).catch(()=>{
loading.style.display = 'none';
})
});
}
}
//用法
import Axios from 'util/axios'
Axios.request('/products',{
categoryId:100012,
pageSize:14
},{ mock:true }).then((res)=>{
//to-do...
})
//或者直接挂载到Vue原型上
Vue.prototype.$request = Axios.request
this.$request('/products',{
categoryId:100012,
pageSize:14
},{ mock:true }).then(()=>{
//to-do...
})
130
相似问题