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

本文主要是介绍前端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报错的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1125131

相关文章

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Windows 上如果忘记了 MySQL 密码 重置密码的两种方法

《Windows上如果忘记了MySQL密码重置密码的两种方法》:本文主要介绍Windows上如果忘记了MySQL密码重置密码的两种方法,本文通过两种方法结合实例代码给大家介绍的非常详细,感... 目录方法 1:以跳过权限验证模式启动 mysql 并重置密码方法 2:使用 my.ini 文件的临时配置在 Wi

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB