axios引入多个baseURl的解决方案

1,480 阅读1分钟

使用请求拦截器

step1 明确vue环境变量中的baseURL地址

NODE_ENV = production
VUE_APP_BASE_URL = /app/api
VUE_APP_URL_TWO= /two
VUE_APP_URL_THREE= /three

step2修改axios请求拦截

// 创建 Axios 实例
const axiosInstance: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL
});
// 请求拦截器
axiosInstance.interceptors.request.use((config) => {
    if(config.requestBase=='VUE_APP_BASE_URL'){
        config.headers['Content-Type']="application/x-www-form-urlencoded"; 

    }else if(config.requestBase=='VUE_APP_URL_TWO'){
        config.headers['Content-Type']="application/json";
        config.baseURL=process.env.VUE_APP_URL_TWO; // 取到环境变量:baseURL
        config.data=JSON.stringify(config.data);  

    }else if(config.requestBase=='VUE_APP_URL_THREE'){
        config.baseURL=process.env.VUE_APP_URL_THREE;
    }
    return config;
});

step3发起请求时 按需传递requestBase的配置即可,可参考

const {data, code} = await request.get<{time: number}>(ROOT_SYSTEM_TIME_URL, 
{}, // 携带的参数
{ requestBase:'VUE_APP_URL_THREE'} // 携带的配置
);