请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

easy-mock能实现部分接口用真数据么

在实际项目中会遇到这样的问题:就是一个项目有很多接口、很多需求,但是我们当前开发需要关注的就只有几个接口,所以如果想实现,那些无关的接口使用真实的接口数据,而当前开发需要调试的那几个接口就使用easy-mock数据,这个要怎么才能实现呢?

我试过配置了axios.defaults.baseURL,但是一配置这个,要么就全部使用了真实数据,要么就全部使用了easy-mock的数据,所以觉得这个是改动“全局”的,不能解决以上问题。

请教一下老师,有没有能解决的方法~

正在回答

2回答

有。你这个问题提的非常好,现实工作当中确实会有这种情况,局部部分新开发接口需要做mock,其它接口对接线上。那我个人的经验和做法:
需要重新封装一下axios插件,从新定义一个新的方法比如request,接受请求的方法和参数,在request里面调用axios,这样我们就能根据传进来的参数判断是走真实接口还是mock。

0 回复 有任何疑惑可以回复我~
  • 提问者 JY_Kong #1
    非常感谢!
    回复 有任何疑惑可以回复我~ 2020-03-28 18:27:32
河畔一角 2020-03-28 18:07:30

//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...

})

12 回复 有任何疑惑可以回复我~
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信