前端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

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象(如模块、类、函数等)的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》:本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量:定义、赋值自定义变量:引用、修改、删

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

LiteFlow轻量级工作流引擎使用示例详解

《LiteFlow轻量级工作流引擎使用示例详解》:本文主要介绍LiteFlow是一个灵活、简洁且轻量的工作流引擎,适合用于中小型项目和微服务架构中的流程编排,本文给大家介绍LiteFlow轻量级工... 目录1. LiteFlow 主要特点2. 工作流定义方式3. LiteFlow 流程示例4. LiteF

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.