vue轮询方法

一、注意问题：
一般轮询都会使用setInterval，但是单独使用它会使页面卡死。

二、下面是3秒钟轮询一次的代码

export default {
   data() {
         return {

　　　　　　timer: null, //定时器

        }
    },
    mounted() {
        this.getList();
        this.timer = window.setInterval(() => {
            setTimeout(() => {
                this.getList()
            },0)
        },3000)
    },
    methods: {
        getList() {
            // 发送接口
        }
    },
    destroyed() {
        window.clearInterval(this.timer)
    }
}

 

三、使用说明：
setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，会出现网页卡死现象。但是setTimeout是自带清除定时器的，两者结合使用将避免页面卡死。

页面初始化，待开始轮询后，离开页面，通过生命周期destroyed钩子函数，销毁定时任务。

 

四、代码第二中写法
意思是将mounted的东西方成方法，这样就可以减少mouted的内代码。

export default {
   data() {
         return {
　　　　　　timer: null, //定时器  
        }
    },
    mounted() {
        this.getlunxunData()
    },
    methods: {
        getlunxunData () {
            this.timer = window.setInterval(() => {
                setTimeout(() => {
                    this.getList()
                    },0)
                },3000)
           },
        getList() {
            // 发送接口
        }
    },
    destroyed() {
        window.clearInterval(this.timer)；
　　　　 this.timer = null;
    }
}

————————————————

原文链接：https://blog.csdn.net/qq_43894292/article/details/121946473

五、Vue轮询的注意事项

在使用Vue轮询时，需要注意以下几个方面：

1、轮询时间间隔

轮询时间间隔需要根据具体的业务需求来设置。如果时间间隔过短，会导致服务器压力过大；如果时间间隔过长，又会导致数据不够实时。通常建议在2~5秒钟之间进行轮询。

2、定时器的清除

在使用定时器时，需要注意在组件销毁时清除对应的定时器，防止过多的定时器运行导致页面卡顿或者崩溃。

3、网络错误处理

轮询操作通常依赖于网络通信，因此需要对网络错误进行处理，以防止页面崩溃。在使用Axios等网络请求库时，建议使用try-catch语句或者Promise的catch方法来进行错误处理。

六、总结

通过本文的介绍，我们了解了Vue轮询的基本概念和使用方法。从以上例子我们可以看出，轮询可以用于实现数据实时更新、数据的长连接等功能。值得注意的是，在使用Vue轮询时需要注意轮询时间间隔、定时器的清除和网络错误处理等问题。希望这篇文章能够帮助你更好地掌握Vue轮询的使用。

 

摘自：https://www.python100.com/html/Q5RA07Q7DL11.html