axios配置多个baseURL和请求拦截 axios配置多个baseURL请求拦截
首先感谢 godferyZhu大佬的文章 Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口的支持，基于这篇文章，继续学习这部分内容，若有不对的地方，请大家留言谢谢；
axios配置多个baseURL1、新建文件service2，包括两个.js文件 utils.js 和 common.js
2、utils.js文件内容
3、common.js文件内容
//1->common.js中引入axiosimport Axios from 'axios'Axios.defaults.timeout = 10000//2->对get请求传递过来的参数处理function paramsToUrl(url, params) { if (!params) return url for (var key in params) { if (params[key] && params[key] != 'undefined') { if (url.indexOf('?') != -1) { url += '&' + '' + key + '=' + params[key] || '' + '' } else { url += '?' + '' + key + '=' + params[key] || '' + '' } } } return url}//3->在common.js中封装公用方法-----封装请求的方法function requireData(url, params, type, item) { if (!url) return false switch (item) { case 'M1': url = Axios.defaults.baseM1URL + url break; case 'M2': url = Axios.defaults.baseM2URL + url break; case 'M3': url = Axios.defaults.baseM3URL + url break; default: url = Axios.defaults.baseM4URL + url } if (type === 'get') { url = paramsToUrl(url, params) return new Promise((resolve, reject) => { Axios.get(url, params).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } else { return new Promise((resolve, reject) => { Axios.post(url, params).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) }}export default { install(Vue, options) { //->接口1的请求数据方法 Vue.prototype.reqM1Service = function (url, params, type) { return requireData.call(this, url, params, type, 'M1') } //->接口2的请求数据方法 Vue.prototype.reqM2Service = function (url, params, type) { return requireData.call(this, url, params, type, 'M2') } //->接口3的请求数据方法 Vue.prototype.reqM3Service = function (url, params, type) { return requireData.call(this, url, params, type, 'M3') } //->接口4的请求数据方法 Vue.prototype.reqM4Service = function (url, params, type) { return requireData.call(this, url, params, type, 'M4') } }}4、在main.js中使用
//在main.js中引入axiosimport axios from 'axios'//引入 utls.jsimport {domain} from './service2/utils'//引入 common.jsimport common from './service2/common'Vue.use(common)//配置axios//->1,模块一接口,url地址axios.defaults.baseM1URL = domain.Base_M1_URL//->2,模块二接口,url地址axios.defaults.baseM2URL = domain.Base_M2_URL//->3,模块三接口,url地址axios.defaults.baseM3URL = domain.Base_M3_URL//->4,模块四接口,url地址axios.defaults.baseM4URL = domain.Base_M4_URL5、在组件文件中使用
<template> <div> <div> <a-input-search placeholder="请输入内容" enter-button @search="test1" style="width: 300px"/> </div> <div> <a-input-search placeholder="请输入内容" enter-button @search="test2" style="width: 300px"/> </div> <div> <a-input-search placeholder="请输入内容" enter-button @search="test3" style="width: 300px"/> </div> </div></template><script>export default { name: 'homePage', data() { return { } }, created(){ }, computed:{ }, methods:{ test1(value){ //->调用第一个个接口的请求服务 let params = { q:value } let url = `/search?&t=all&p=1&s=0&tm=0&lv=-1&ft=0&l=&u=&ct=-1&pnt=-1&ry=-1&ss=-1&dct=-1&platform=pc` this.reqM1Service(url,params,'get').then(res=>{ console.log(res) }) }, test2(value){ console.log(value) //->调用第二个个接口的请求服务 let params = {} let url = '/assemble/list/channel/pc_hot_word?channel_name=pc_hot_word&size=10&platform=pc&imei=10_30706525170-1612333398942-258444' this.reqM2Service(url,params,'get').then(res=>{ console.log(res) }) }, test3(){ //->调用第三个个接口的请求服务 let url = '/screen/intelligentDelivery/returnToCity' let params ={} this.reqM3Service(url,params,'get').then(res=>{ console.log(res) }) }, }, mounted() { },}</script><style lang="scss" scoped></style><style scoped>.example { text-align: center; background: rgba(0, 0, 0, 0.05); border-radius: 4px; margin-bottom: 20px; padding: 30px 50px; margin: 20px 0;}</style>6、访问结果
但是仅仅以上可以仅仅满足部分请求要求，但是需要总会不同，下面继续探讨如下内容