js脚本加载重试

实现js脚本加载重试可以直接看文档最后两张图，上面是推导过程

我们前端打包后会出现如下加载js文件的代码：

但是某种特殊的情况会导致加载js失败

失败了如何重试呢？ 首先想到script标签的onerror事件如下：

控制台输出如下：

但是工程化的情况下这些是打包工具自己决定引用哪些js文件，我们直接去改也不方便，最好能放到一个固定的地方。

我们如图新写了一个script标签使用addEventListener监听error事件，但是控制台没有任何输出：

因为js顺序执行，运行到了addEventListener之后，脚本已经失败了，失败过后监听就没有监听到。于是我们移动到靠前的位置。

但是浏览器控制台没有任何输入 是因为脚本的error事件不会冒泡，所以修改如下：

在捕获阶段去监听，控制台如下输出正常

此时还有一个问题：页面的error事件有很多，js运行error，图片加载error等等，如何区分error只处理加载文件失败的情况？ 以下代码可以精确到只处理脚本加载错误的情况

以上讲了在什么时机去重试，接下来说说如何去重试： 脚本加载失败通常要换一个域名重试，公司会有一个域名列表，如果所有的都失败了那应该是服务器宕机了。 代码如下：

控制台输出如下：

此时还有一个问题，我们希望script加载脚本出错后立即重试而不是继续加载下一个script标签的内容。如图中的加载1.js失败后马上加载2.js，然后才重试加载1.js。如果2.js用到了1.js中的内容，这很就出现问题，所以希望报错后阻塞浏览器解析，马上重试加载直至加载成功或者全部失败。所以最终版来了：

控制台输入如我们所希望的：

所有的都失败了才执行下一个script加载新脚本。