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

Question

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

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

请教一下老师，有没有能解决的方法～

Answer 1

河畔一角 2020-03-28 17:47:58

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

• 提问者 JY_Kong #1

  非常感谢！

Answer 2

河畔一角 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...

})