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、访问结果




但是仅仅以上可以仅仅满足部分请求要求，但是需要总会不同，下面继续探讨如下内容

请求拦截