一 发新版本导致

问题的根源是服务器js文件更新了，页面还在请求以前的js文件。可以保留之前webpack打包的文件，但是时间久了文件体积会积累到很大，而且从产品角度更希望用户访问新的资源。所以最好的解决方式是在报错时给用户提示，用户点击确认后刷新页面。前端如何能catch到这种错误？

目前还没找到catch这种错误的方法，但是，可以模拟这种错误的出现。

js文件是以script标签的形式动态添加到head标签里的，可以给head绑定DOMNodeInserted这个事件在有子元素插入的时候触发，可以在回调里拿到插入的标签名以及标签的属性包括src。这样在所有js资源加载时我们都可以在回调事件里拿到资源路径，然后在创建一个请求去请求该资源，代码如下：

    const head = document.getElementsByTagName('head')[0]
    head.addEventListener('DOMNodeInserted', e => {
      // 获取标签名
      const type = e.target.tagName
      // 获取资源路径
      const url = e.target.src
      if (type === 'SCRIPT' && url) { 
        // 创建请求，如果需要低版本浏览器兼容的，请注意
        let xhr = new XMLHttpRequest()
        xhr.open('get', url)
        xhr.onload = () => {
          const text = xhr.responseText
          if (text.indexOf('<') === 0) {
            this.$modal.info({
              title: '检测到有新的版本发布，需要刷新页面以访问最新内容',
              width: 350,
              okText: '确定',
              onOk() {
                location.reload()
              }
            })
          }
        }
        xhr.send()
      }
    })
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。