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

配置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

wode路

3653人浏览 · 2020-12-18 09:52:45

wode路 · 2020-12-18 09:52:45 发布

配置

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")
   }
})