当前位置：首页 > news >正文

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

news 来源：原创 2024/9/22 11:41:44

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

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