浏览器网络异常导致JS文件请求失败的问题及处理

2024-05-29 15:55:45

工作中遇到一个场景，某页面的主要显示逻辑关联到1个JS文件A，该文件没加载时，页面将显示空白（框架特性）。有时用户使用时（测试时......）网络波动，导致页面A的该文件加载失败，页面显示空白了，切换到其他菜单页面B时，网络恢复正常，页面正常显示。这时再切换回页面A，页面还是会显示空白，浏览器控制台会报错Uncaught （in promise）TypeError: Failed to fetch dynamically imported module: **************

主要原因：

debug发现，正常页面跟异常页面最终都是import（懒加载语法）了目标文件。正常页面因为发现本地没有该文件，就会发送网络请求获取（本地有则用本地文件）。而对于异常页面，因为在第一次请求时，那次网络请求由于网络不好而失败了（network列表中存在该错误请求历史），导致后续每次重进页面再次import时，直接返回了上述报错，而没有去重新请求。

部门大佬补充了一下，认为是第一次请求时，程序还是认为已经解析了一遍该JS文件，后续每次请求后就没再有相关解析操作了。

临时处理

因为切换菜单无法解决该问题，已经存在该错误历史了，只能捕获这种错误，提示用户手动刷新页面（PS：还是不能自动刷新，如果网络持续故障一段时间，页面容易持续不断地刷新）

promise.catch(() => { // 用try/catch效果一样// 自定义处理
});
/*
promise为请求该文件的import操作
*/

浏览器网络异常导致JS文件请求失败的问题及处理相关推荐

开发EduSoho v8.7.10 本地播放视频超时或者快进后网络错误导致视频下载中途失败。鉴权播放次数问题
EduSoho v8.7.10 本地播放视频超时或者快进后网络错误导致视频下载中途失败.鉴权播放次数问题文件路径 src/AppBundle/Twig/WebExtension.php protec ...
微信分享功能问题-描述内容换行，导致js加载失败
jsContent内容存在换行符,导致js处理失败, 解决办法,在后台接口中替换'/r/n'为空,并截取前30位 weiXinJsSdk.setSharcontent(StringUtils.isNo ...
EduSoho v8.7.10 本地播放视频超时或者快进后网络错误导致视频下载中途失败。
EduSoho v8.7.10 本地播放视频超时或者快进后网络错误导致视频下载中途失败.鉴权播放次数问题文章转载于 https://m.zkdygl.com/d/223-edusoho-v8710 ...
解决浏览器加载缓存js文件不能及时获取服务器更新后js文件问题
当服务器修改js文件后,需要用户重新获取修改后的js文件,而不是访问之前浏览器中缓存的js文件.下面记录一个现在最常用的方法: 页面中访问js的链接如下: <script src="/ ...
在线升级，下载升级包过程中提示网络异常导致升级失败。
问题描述: 连接wifi,选择在线升级,在现在升级包过程中,提示网络异常,导致升级失败. 问题解决: 首先分析mainlog中对应时间点上下文的log.通过搜索rssi,查看当前wifi连接状态,如下 ...
浏览器缓存文件导致js文件更改无效
20180509 前端时间进行web项目更改时,发现更改了js文件后怎么刷新页面都没有用.最后删除js文件,重启iis,刷新页面还是没用, 最后通过清楚IE11浏览器缓存解决了问题. 转载于:http ...
设备断电等异常导致MP4文件无法打开的解决方案
在实际项目中,比如DVR设备,视频一般是MP4格式,MP4并非是流媒体格式,如果视频没有正常写完,会导致无法打开和播放这个MP4文件,有没有办法恢复已经保存的MP4文件,就这个文章我们讨论一下可行的方 ...
浏览器控制台 console 引入 js 文件
比如:想使用 SockJs,则需要引入SockJS 的 js 文件 <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/ ...
ajax发送失败网络异常,如何检测网络断开导致的Ajax呼叫失败
我使用jquery ajax方法向web服务器发送大量数据,客户端只在收到服务器的确认后才响应,现在假设网络连接在ajax调用的MIDDLE中丢失,那么如何检测这种情况. $.ajax({ url:' ...
案例详解：Linux文件系统异常导致数据库文件无法访问
墨墨导读:某客户单位数据库出现异常,大致现象是:数据库状态是open的,但是其中一个数据文件无法访问,本文分享排查原因与解决问题的整个过程. 通过ls 查看文件都报错,如下所示: [oracle@or ...

最新文章

热门文章