大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

在VUE中封装API接口

在前端vue的开发中,有一点是必须要做的,那就是将所有的API接口封装起来,因为从开发到最终上线的过程中,API是需要经常更换的,所以需要将API封装起来,便于修改和更换。

在所有的API中,每一个API都会分成两个部分,比如:
https://easy-mock.com/mock/5bcd8e154994296c2af093ea/SmileVue/index;这是分成基本路径和最后的 index 两部分的,一般情况下如果需要更换API的时候,只是更换前半部分,最后的 index 是不会改变的。所以这就好办了。

在 src 目录下新建一个 serviceAPI.config.js 文件,然后在文件中写入:

const BASEURL = 'https://easy-mock.com/mock/5bcd8e154994296c2af093ea/SmileVue/'
const URL = {
    getShoppingMallInfo : BASEURL + 'index',
    getGoodsInfo : BASEURL + 'getGoodsInfo',
}

module.exports = URL

这就封装完了一个 API 配置文件了,然后在调用的时候,直接引入即可:

//引入serviceAPI
            import url from '@/serviceAPI.config.js'
            axios({
                // 调用 serviceAPI
                url:url.getShoppingMallInfo,
                methods:'get',
            }).then(res =>{
                console.log(res.data);
            }).catch(err => {
                console.log(err);
            })