setInterval每次刷新页面都会重新执行？

Question

vue2开发
需求是没间隔多上时间请获取一次token、token是10分钟有效、我需要在7分钟的时候刷新一次token、然后我使用的是setInterval()方法 没7分钟请求一次,
但是出现的问题是、页面刷线以后setInterval()方法又重新执行了一次、导致没有正常刷新token

1. 如何解决setInterval页面刷新以后不再重新执行

2. 或者利用其他方法

   setInterval(() => {
      console.log('没30s执行一次')
    }, 30000);
   

Answer 1

可以设置下一次更新时间，通过当前时间是否超过设置的时间（可提前xx秒）,然后更新token，再次设置下一次更新时间

Answer 2

使用浏览器缓存，将获取到的token和获取时间存入localStorage，定时器判断时，根据上次获取时间判断，超出7min的话去后台拿token，覆盖存入localStorage。

关于localStorage你可以参考：
https://www.runoob.com/w3cnote/localstorage-spec.html

或者看看有没有鉴定token有效性的接口，在必要操作时进行token有效性校验，如果失效了再重新获取。

Answer 3

页面销毁前清除定时器

created() { 
    this.intervalId = setInterval(
    () => { console.log('没7分钟执行一次') }, 7 * 60 * 1000) 
    // 每7分钟执行一次 
    } 

beforeDestroy() { clearInterval(this.intervalId) }