解决chrome中使用setInterval引起的资源加载失败报错

记录一次解决chrome中使用setInterval引起的资源加载失败报错

这里有三种情况，都是和Ajax请求有关。
第一，如果是使用一个setInterval，如果设置的间隔时间小于了执行请求时间，会因为上个请求数据没有返回而执行下个请求造成阻塞，就会报类似于 net :: ERR_NETWORK_IO_SUSPENDED；

第二，如果是使用多个setInterval，就算设置时间比较长，但是由于两个setInterval执行时间相隔太短也会出现这个报错，我就是这种情况，而且都只要点击一下浏览器报错信息重新加载就好了，但是用户不会这样操作，所以还是不好，而且这两种情况都可能是由于网页长时间没有操作的前提下，只要有操作，好像都不会报错。

第三就是单纯的由于用户没有长时间操作而引起的。

综上可以间隔一定时间，比如15分钟，让浏览器自动执行一次鼠标操作，比如移动，点击等，但是又要注意这些操作不会引发自己设置的相应事件引发其他bug.

我解决的办法想到了几种，比如我的项目有自动刷新数据功能，那就间隔一定时间模拟鼠标点击该按钮效果，反正都要自动获取，具体代码百度一下就好了，但是我没试过。因为我还有用户能关闭这个功能。所以我先采用自动刷新页面

this.autoreloadInter = setInterval(() => {
      
      this.reload()
    },60000)

如果写在mounted里面并不会像我想的那样每次刷新，定时器会重载，这个定时器会累加，但是只是个数变多，不会影响执行时间，但是定时器多了你懂的

但是可能会出现白屏，所以采用新建一个空白页，先跳转到空白页，我的只是页面会闪一下，但是没有白屏，所以没用这个方法

this.$router.replace({
path:'空白页.vue',
name:'空白页'
}）

空白页写：

this.$router.replace({
path:'index.vue',
name:'index'
}）

最后一种方法，亲测居然和我写location.reload()效果一样，我还是写出来好了，先在app定义好

<template>
  <div id="app">
    
    <router-view v-if="isRouterAlive" />
  </div>
</template>
<script>
export default {
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true 
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    }
  }
};

然后在主页注册，比如home

inject:['reload'], 

就可以使用this.reload()刷新了