本文主要是介绍前端axios封装request请求,在request(编译时)里面使用windows报错,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1.报错代码
可以看到
const isLocalEnv = !location.href.includes(".com");
是直接定义在文件中的,然后request里面引入globalConfig,handle401AndRedirect(toLogout);
是在报错时执行的
src\utils\globalConfig.ts
const isLocalEnv = !location.href.includes(".com");/*** @description 本地运行时,登录失效是否重定向到登录* @param callback 重定向函数* @version: 2024-08-30 11:39:11*/
const isRedirectOn401InLocal = false;
export const handle401AndRedirect = (callback) => {if (isLocalEnv && isRedirectOn401InLocal) {callback();}
};
src\utils\request.ts
import { handle401AndRedirect } from "./globalConfig";
export const requestDefaultConfig: ICERequestConfig = {baseURL: env.systemService.baseUrl,timeout: 60000,// 拦截器sinterceptors: {request:{},response: {onConfig: (response) => {return response;},onError: (error) => {handle401AndRedirect(toLogout);}}}
}
2.修改后的代码
可以看到
const isLocalEnv = !location.href.includes(".com");
改成在函数中定义了,然后request里面引入globalConfig,handle401AndRedirect(toLogout);
是在报错时执行的,也就是报错时才定义window相关的属性
src\utils\globalConfig.ts
/*** @description 本地运行时,登录失效是否重定向到登录* @param callback 重定向函数* @version: 2024-08-30 11:39:11*/
const isRedirectOn401InLocal = false;
export const handle401AndRedirect = (callback) => {const isLocalEnv = !location.href.includes(".com");if (isLocalEnv && isRedirectOn401InLocal) {callback();}
};
src\utils\request.ts
import { handle401AndRedirect } from "./globalConfig";
export const requestDefaultConfig: ICERequestConfig = {baseURL: env.systemService.baseUrl,timeout: 60000,// 拦截器sinterceptors: {request:{},response: {onConfig: (response) => {return response;},onError: (error) => {handle401AndRedirect(toLogout);}}}
}
3.分析
在JavaScript中,模块
的顶层代码
在导入模块
时会立即执行
。request
里面一引入globalConfig
就会执行window
相关的代码,但是request
一开始是在编译时
执行的,而编辑时不存在window相关属性,如果这些代码依赖于特定环境(如浏览器环境)的全局对象(如 location
),而在导入时该环境并不可用,那么这些代码就会抛出错误。
在上面的代码中,在模块顶层的代码中使用了 location
对象,这导致了在非浏览器环境下导入该模块时出现错误。为了解决这个问题,可以将依赖于浏览器环境的代码移动到一个函数中。函数的内容只有在调用时才会被执行,因此可以确保当你的函数在浏览器环境中被调用时,location
对象是可用的。
将 const isLocalEnv = !location.href.includes(".com")
的定义移动到了 handle401AndRedirect
函数中。这样,只有在浏览器环境中调用 handle401AndRedirect
函数时,才会尝试访问 location
对象,从而避免了在非浏览器环境中导入模块时出现错误。
这是一种被称为"延迟执行"的策略,它可以确保只有在正确的环境中,才会执行依赖于该环境的代码。
这篇关于前端axios封装request请求,在request(编译时)里面使用windows报错的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!