vue中使用axios发送请求，多种baseURL的配置方法

灰太狼 2022-12-28 15:30 1009阅读 0赞

## 配置 ##

config/dev.env.js：

'use strict'
    const merge = require('webpack-merge');
    const prodEnv = require('./prod.env');
    
    module.exports = merge(prodEnv, { 
      NODE_ENV: '"development"',
      APP_NAME: '"一体化管理信息平台"',
      API_ROOT: '"http://xxx.xxx.xxx.xx:xxxx"'
    });

config/prod.env.js：

'use strict'
    module.exports = { 
      NODE_ENV: '"production"',
      APP_NAME: '"一体化管理信息平台"',
      API_ROOT: '"http://xxx.xxx.xxx.xx:xxxx"'
    };

axios/index.js：

import axios from 'axios' //引入axios
    import store from '../store'
    import router from '../router'
    import Vue from 'vue';
    let v = new Vue();
    let _this = this;
    var repeatUrl = ""//防止重复提交
    
    const http = axios.create({ 
      timeout: 10000 * 12,
      baseURL: process.env.API_ROOT, //地址1
      headers: { 
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
    const http1 = axios.create({ 
      timeout: 10000 * 12,
      baseURL: "http://ss.sss.s.ss:ssss", //地址2
      headers: { 
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
    
    // http request 请求拦截器
    http.interceptors.request.use(config => { 
      if(repeatUrl == config.url){ //防止重复提交
        return Promise.reject();
      }
      repeatUrl = config.url
      if (store.state.token) { 
        config.headers['Authorization'] = localStorage.getItem('token');
      }
      return config;
    }, error => { 
      v.$message({ 
    	dangerouslyUseHTMLString: true,
        showClose: true,
        message: '请求发送错误',
        type: 'error'
      });
      return Promise.reject(error);
    });
    http1.interceptors.request.use(config => { 
      if(repeatUrl == config.url){ //防止重复提交
        return Promise.reject();
      }
      repeatUrl = config.url
      if (store.state.token) { 
        config.headers['Authorization'] = localStorage.getItem('token');
      }
      return config;
    }, error => { 
      v.$message({ 
    	dangerouslyUseHTMLString: true,
        showClose: true,
        message: '请求发送错误',
        type: 'error'
      });
      return Promise.reject(error);
    });
    
    // http response 接收拦截器
    http.interceptors.response.use(response => { 
        var token = response.headers['authorization'];
        if (token) { 
          store.commit('set_token', token);
        }
        var data = response.data;
    		// 为了全局拖拽显示图标
    		var thcells = document.getElementsByTagName("th");
        for(var i = 0;i<thcells.length;i++){ 
          thcells[i].classList.add("is-sortable");
        }
        if (data.code == '401') {  //未登录
          store.commit('del_token');
          router.push('login?msg');
        } else if (data.code == '403') {  //未授权
          v.$message({ 
    		    dangerouslyUseHTMLString: true,
            message: '您没有权限使用该功能',
            type: 'warning'
          });
        } else if (data.code != '0') { 
          let str=data.msg;
          if(str == null){ 
            v.$message({ 
    			    dangerouslyUseHTMLString: true,
              showClose: true,
              message: "请求失败",
              type: 'error'
            });
          }else{ 
            v.$message({ 
    			    dangerouslyUseHTMLString: true,
              showClose: true,
              message: str,
              type: 'error'
            });
          }
    
        }
        repeatUrl = ""
        return response;
      },
      error => { 
        var msg;
        if (error && error.response && error.response.data) { 
          msg = error.response.data.msg;
        }
        if (!msg) { 
          msg = '网络错误';
        }
        v.$message({ 
    	    dangerouslyUseHTMLString: true,
          showClose: true,
          message: msg,
          type: 'error'
        });
        repeatUrl = ""
        if (error && error.response && error.response.data) { 
          return Promise.reject(error.response.data)
        } else { 
          return Promise.reject(error)
        }
      });
    http1.interceptors.response.use(response => { 
        var token = response.headers['authorization'];
        if (token) { 
          store.commit('set_token', token);
        }
        var data = response.data;
    		// 为了全局拖拽显示图标
    		var thcells = document.getElementsByTagName("th");
        for(var i = 0;i<thcells.length;i++){ 
          thcells[i].classList.add("is-sortable");
        }
        if (data.code == '401') {  //未登录
          store.commit('del_token');
          router.push('login?msg');
        } else if (data.code == '403') {  //未授权
          v.$message({ 
    		    dangerouslyUseHTMLString: true,
            message: '您没有权限使用该功能',
            type: 'warning'
          });
        } else if (data.code != '0') { 
          let str=data.msg;
          if(str == null){ 
            v.$message({ 
    			    dangerouslyUseHTMLString: true,
              showClose: true,
              message: "请求失败",
              type: 'error'
            });
          }else{ 
            v.$message({ 
    			    dangerouslyUseHTMLString: true,
              showClose: true,
              message: str,
              type: 'error'
            });
          }
    
        }
        repeatUrl = ""
        return response;
      },
      error => { 
        var msg;
        if (error && error.response && error.response.data) { 
          msg = error.response.data.msg;
        }
        if (!msg) { 
          msg = '网络错误';
        }
        v.$message({ 
    	    dangerouslyUseHTMLString: true,
          showClose: true,
          message: msg,
          type: 'error'
        });
        repeatUrl = ""
        if (error && error.response && error.response.data) { 
          return Promise.reject(error.response.data)
        } else { 
          return Promise.reject(error)
        }
      });
      
      export { http, http1}

main.js：

import { http} from './axios'
    import { http1} from './axios'
    
    Vue.prototype.$http = http
    Vue.prototype.$http1 = http1

## 使用 ##

//使用地址1请求:
    this.$http.get(`${ this.urlType}/toCheck`).then((res) => { 
       if(res.data.data){ 
         console.log("success")
       }else{ 
         console.log("fail")
       }
    })
    //使用地址2请求:
    this.$http1.get(`${ this.urlType}/toCheck`).then((res) => { 
       if(res.data.data){ 
         console.log("success")
       }else{ 
         console.log("fail")
       }
    })