axios配置多个baseURL和请求拦截
axios配置多个baseURL和请求拦截axios配置多个baseURL请求拦截首先感谢godferyZhu大佬的文章 Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口的支持,基于这篇文章,我继续封装部分内容,若有不对的地方,请大家留言谢谢;axios配置多个baseURL1、新建文件service2,包括两个.js文件 utils.js 和 common.js2、u
·
axios配置多个baseURL和请求拦截
首先感谢 godferyZhu大佬的文章 Vue 2.0 项目中Axios配置不同的baseURL,请求不同的域名接口的支持,基于这篇文章,继续学习这部分内容,若有不对的地方,请大家留言谢谢;
axios配置多个baseURL
1、新建文件service2,包括两个.js文件 utils.js 和 common.js
2、utils.js文件内容
// 导出 对应的不同接口的URL地址
module.exports = {
domain: {
Base_M1_URL: 'https://so.csdn.net/api/v3', //模块一接口地址
Base_M2_URL: 'https://silkroad.csdn.net/api/v2', //模块二接口地址
Base_M3_URL: 'http://test.xxxxxxx.com', //模块三接口地址
Base_M4_URL: 'http://api.xxxxxxx.com', //模块四接口地址
}
}
3、common.js文件内容
//1->common.js中引入axios
import 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中引入axios
import axios from 'axios'
//引入 utls.js
import {domain} from './service2/utils'
//引入 common.js
import 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_URL
5、在组件文件中使用
<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、访问结果
但是仅仅以上可以仅仅满足部分请求要求,但是需要总会不同,下面继续探讨如下内容
请求拦截
更多推荐
已为社区贡献9条内容
所有评论(0)