【JS】如何处理JS脚本加载失败_js加载错误,请重新加载-CSDN博客

本文链接：https://blog.csdn.net/owo_ovo/article/details/141223390

前言

单页面应用基于JS构建，如果某个JS加载失败可能导致页面无法显示。
所以需要对加载失败时进行处理，首先需要捕获失败时机，其次尝试进行重新加载。

捕获错误

可以通过 script 的 onerror 捕获，但是不适用于框架中，手动写太过繁琐。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script onerror="console.log('出错了'); " src=" http://static.com/1.js"></script>
  <script onerror="console.log('出错了'); " src=" http://other-domain.com/2.js"></script>
  <script onerror="console.log('出错了'); " src=" http://xxx.com/3.js"></script>
</body>

</html>

可以给 window 添加 error事件，但需要注意的是，必须确保在加载JS前监听error事件，而且因为 error事件 不参与冒泡，需要在捕获阶段拿到 error，即第三个参数为true。

<script>
  window.addEventListener('error', (e) => {
     
     
    console.