vue中如何调取api_在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);

})