工作中遇到一个场景,某页面的主要显示逻辑关联到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操作
*/

更多推荐