方案1 使用请求拦截器(推荐)

适用场景:产品后期迭代新引入后端模块,base地址不同。
栗子:
setp1:明确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'} // 携带的配置
);

方案2 使用多个axios实例(不推荐)

适用场景:产品后期迭代新引入后端模块,base地址不同。
弊端:代码冗余大。

// 创建 Axios 实例 1
const axiosInstance1: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_ONE
});

// 创建 Axios 实例 2
const axiosInstance2: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_TWO
});

// 创建 Axios 实例 3
const axiosInstance3: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_THREE
});

方案3 不使用baseURL

适用场景:产品开发前期,不明确多少个base地址。

export const SYSTEM_TIME_URL = '/app/api/system/time'; // 地址写全即可

方案4 使用对象键值对指代base地址

适用场景:产品开发前期,明确了多个base。若处于项目后期,则不推荐。

export const requestBase = {
	base_url_one: '/one/xxx',
	base_url_two: '/two/xxx',
}
import requestBase from 'xxx';
export const SYSTEM_TIME_URL = `${requestBase.base_url_one}/app/api/system/time`; // 地址写全即可
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐