1.前言

相信很多人都遇到过这样的问题,页面数据需要不断的刷新,也就是不断的发送ajax请求来更新数据,那么在vue中怎样做才比较好呢?这里介绍一下我踩的坑,以及解决方案

2.问题

settimeout用来调用请求数据,但是我遇到的问题就是,没有用合适的方式去关闭settimeout,出现了离开当前页面,请求还在不断的发送问题,这样给服务器带来了无必要的压力。附上之前的代码:

    self.deployTimeOutId = setTimeout(() => {
                            self.getDeployList(false);
                        }, 5000);

说明:这一段代码是嵌在getDeployList方法中的,离开当前页面的是时候,必须要去手动的把这个settimeout清除才行。一般这个写在destoryed()这个钩子里。

window.clearTimeout(this.deployTimeOutId);

虽然这样处理了,但在逻辑比较复杂的情况下,还是出现了没有关闭的情况,而且排查起来很痛苦。下面介绍一种针对Vue比较好的做法。

3.解决方案

    let self=this;
    if (self && !self._isDestroyed) {
                        setTimeout(() => {
                            if (self && !self._isDestroyed)
                                self.getDeployList();
                        }, 5000);
                    }

_isDestroyed这个属性表示的是当前这个组件是否有被销毁,true表示当前的组件已经被销毁,通过上面这个判断,我们就不需要自己手动的去用ID来清除了,这个就相当于递归嘛,有了一个结束判断,避免了死循环咯~~

Logo

前往低代码交流专区

更多推荐