前端axios封装request请求,在request(编译时)里面使用windows报错

server/2024/10/25 8:46:04/

1.报错代码

可以看到const isLocalEnv = !location.href.includes(".com"); 是直接定义在文件中的,然后request里面引入globalConfig,handle401AndRedirect(toLogout);是在报错时执行的

src\utils\globalConfig.ts

js">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

js">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

js">
/*** @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

js">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 对象,从而避免了在非浏览器环境中导入模块时出现错误。

这是一种被称为"延迟执行"的策略,它可以确保只有在正确的环境中,才会执行依赖于该环境的代码。


http://www.ppmy.cn/server/110603.html

相关文章

海康二次开发学习笔记12-从Group外部输入图像

从Group外部输入图像 用OpenCV从本地读图 当Group内部无图像源模块时,可以通过代码的方式将图片传入Group内部.实现方式有多种,可以使用OpenCV从本地读图,可在程序集搜索引用OpenCvSharp,同时将其复制本地的属性改为False. 1. 界面设计 增加加载图像按钮 2. 处理…

使用QT开发一些特殊相机的思路:个人经验

前言: 去年使用QT开发过Dalsa线扫相机的应用程序,去获取数据,显示图片,实时分析等,测试demo的链接如下: Dalsa线扫相机-二次开发-QT-C 可用Demo(一)_dalsa开发-CSDN博客 前段时间&am…

Linux3-Linux用户和权限

简介:个人学习分享,如有错误,欢迎批评指正。 一、root用户(超级管理员) 无论是Windows、MacOS、Linux均采用多用户的管理模式进行权限管理。 在Linux系统中,拥有最大权限的账户名为:root&#…

ACL实验配置学习笔记

拓扑描述: R1作为所有PC的网关; 财务部用户:192.168.1.0/24 市场部用户:192.168.2.0/24 Server1:HTTP服务器地址为7.7.7.7/24 PC 2:192.168.1.2 PC 5::192.168.2.2 PC 3:&…

【秋招笔试】9.01字节跳动秋招(已改编)-三语言题解

🍭 大家好这里是 春秋招笔试突围,一起备战大厂笔试 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 | 编程一对一辅导 ✨ 本系列打算持续跟新 春秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 🍒 本专栏已收…

一个人独立开发前后端,终于有属于自己的一套产品

大家好,我是兔兔答题的开发者。兔兔答题是一款简单、易用的答题考试系统,可应用于微信考试、付费考试、社会调查问卷、明星知识问答、员工培训考核、模拟自测、企业面试、试题库等多种场景。兔兔答题会根据不同的场景,开发不同的模版。例如驾…

k8s安全

Kubernetes(k8s)的安全机制是围绕保护其API Server来设计的,主要包括认证(Authentication)、鉴权(Authorization)和准入控制(Admission Control)三个核心环节。下面分别对…

阿里达摩院:FunASR语音识别

阿里达摩院:FunASR语音识别 github: https://github.com/modelscope/FunASR/ 1 clone 代码到本地,切换到 FunASR/ git clone https://github.com/alibaba/FunASR.git && cd FunASR2 虚拟环境 conda create -p ./venv python3.12 conda activ…