vue使用axios配置多域名

vue使用axios配置多域名

如有误，欢迎指教~

说明

配置多域名，在axios封装请求基础上，配置以下几点

• 在interceptors.request中添加判断

  if (config.requestBaseUrl == 'outside') {
    	config.baseURL = process.env.OUTSIDE_API;
  }
  

• 在请求方法中新增属性requestBaseUrl

   post(url, data, domainName = '') {
     	return axiosInstance({
           method: "post",
           url: url,
           data: data,
           requestBaseUrl: domainName
    	});
   },
  

• 在调用api时，添加标识outside【标识自定义】

  nearLinkByPoint(params) {
    	return instance.post('/link/getNearLinkByPoint', params, 'outside');
  },
  

  
  

配置域名

在生产环境在prod.env.js配置，具体根据需求

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://xxx"',
  OSS_API:'"https://xxx.com"',
  OUTSIDE_API: '"https://xxx"'
}

​

axios配置

这里新建instance.js文件，根据实际情况调整内容

import axios from "axios";
import qs from "qs";
import store from "../store";
import { getToken, TOKEN_KEY } from './utils'
import Vue from 'vue'


// 获取公共配置域名
const commUrl = process.env.BASE_API;

// 根据所需拼接公共名称
const baseURL = `${commUrl}/api/v2`; //接口
const imgURL = `${commUrl}/uploads/`; //图片

// 创建axios实例配置，根据个人所需配置
const axiosInstance = axios.create({
    baseURL: baseURL, // base url
    imgURL: imgURL,
    timeout: 30000, // 超时
    withCredentials: true, // 是否跨域
    commURL: commUrl
});


// http request
axiosInstance.interceptors.request.use(
    config => {
      	// 根据标识，如果为outside更换请求地址【config相关数据效果图如下】
       	console.log('request config：', config);
        if (config.requestBaseUrl == 'outside') {
            config.baseURL = process.env.OUTSIDE_API;
        }
      
      	// 获取token
        let token = getToken();
        if (token) {
            config.headers.common[TOKEN_KEY] = `${token}`;
        }
      
        var e = window.localStorage.getItem("X-CSRF-Token");
        if (e) {
            config.headers.common["X-CSRF-Token"] = e;
        }
      
      	// 根据个人所需配置，在请求头新增参数信息
        config.headers["Cache-control"] = "no-cache"; // 指示请求或响应消息不缓存
        config.headers["Cache-control"] = "no-store";
        config.headers["storeId"] = 123;
        config.headers["SerialNO"] = parseInt(Math.random() * 1000000); // 随机数
        
		// 请求方式
        if (config.method == 'get') {
          
            config.headers["Content-Type"] = 'application/x-www-form-urlencoded'
            // 序列化
            config.data = qs.stringify(config.data);
          
        } else {
          	// json方式
            config.headers["Content-Type"] = "application/json";
            config.data = config.data;
        }
        
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);


// http response
axiosInstance.interceptors.response.use(
    response => {
        let datas = response.data;
      	// 根据相应code判断
        if(datas.code == 200001) {
            return response.data
		
        } else if (response.status == 401 || (datas.code == 401001 || datas.code == 401004)) {
            // 清空退出登录信息
            store.commit("LOGOUT");
            
          	// 跳转登录，
          	router.replace({
                path: "/Login",
                query: { redirect: router.currentRoute.fullPath }
            });

            return false;
        } else {
            Vue.prototype.$toast(datas.msg ? datas.msg : '未知错误');
            return false;
        }
    },
    error => {
        return Promise.reject(error);
    }
);

// 导出方法
export default {
    post(url, data, domainName = '') {
        return axiosInstance({
            method: "post",
            url: url,
            data: data,
          	requestBaseUrl: domainName
        });
    },

    get(url, params, domainName = '') {
        return axiosInstance({
            method: "get",
            url: url,
            params,
          	requestBaseUrl: domainName
        });
    },
    baseURL() {
        return baseURL;
    },
    imgURL() {
        return imgURL;
    },
    commURL() {
        return comurl;
    }
};

request config数据效果图

api文件

创建urlApi.js文件，存放相关api

import instance  from './instance'

export default {
  	// post请求
  	tripLineSpotList(params) {
        return instance.post ("/tripLine/getTripLineSpotList", params);
    },
  
  	// 多加一个参数 outside
  	nearLinkByPoint(params) {
        return instance.post('/link/getNearLinkByPoint', params, 'outside');
    },
}

使用

通过this.axios.api接口方法调用，根据实际情况使用。get、post使用方式是一样的。

getTripSubjectList() {
    let params = {
    	coordinate: JSON.stringify(coordinate)
    }
   
    this.axios.nearLinkByPoint(params).then((res) => {
      	// 异常提示
      	if (!this.requestErrorTip(res)) return false;
      	
      	// 返回信息，根据实际情况获取
        let datas = res.data;
    })
},