四种axios中引入多个baseURL的解决方案
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Mar
·
处理axios多个baseURL
方案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`; // 地址写全即可
更多推荐
已为社区贡献2条内容
所有评论(0)