设置动态baseURL

192 阅读1分钟
  • 首先需要去掉默认的baseURL
/**
 * 创建并配置一个 Axios 实例对象
 */
const service: AxiosInstance = axios.create({
	// baseURL: import.meta.env.VITE_API_URL,
	timeout: 600000, // 全局超时时间
	paramsSerializer: (params: any) => {
		return qs.stringify(params, { arrayFormat: 'repeat' });
	},
});
// 假设有一个函数可以异步获取baseURL;
async function getDynamicBaseURL(urlPostfix = true): Promise<string> {
	// 这里可以是任何逻辑,比如从服务器获取配置,从本地存储读取等
	// 作为示例,这里简单返回一个字符串
	const url = urlPostfix ? import.meta.env.VITE_API_URL : '';
	return url;
}
// 动态设置baseURL的函数;
export async function setDynamicBaseURL(urlPostfix = true) {
	const baseURL = await getDynamicBaseURL(urlPostfix);
	service.defaults.baseURL = baseURL;
}
// 在应用程序初始化时或在需要发送请求之前,调用此函数来设置baseURL
setDynamicBaseURL(true);
  • 请注意,由于getDynamicBaseURL是一个异步函数,因此您需要在应用程序启动或准备发送请求之前确保它已经完成。您可能需要调整代码以适应您的特定用例,例如,在Vue或React组件的生命周期钩子中调用setDynamicBaseURL,或者在发送请求之前确保baseURL已经设置。

  • 具体使用方式

//先引入
 import { setDynamicBaseURL } from '/@/utils/request.ts';
 //使用
onMounted(async () => {

	await setDynamicBaseURL(false);//修改接口请求的baseURL
	initInfoApi();//接口请求
	await setDynamicBaseURL(true);//将baseURL修改为原来默认的值
});