Vue 脚手架项目，轮询完整实现，适合新消息刷新等逻辑

最新推荐文章于 2024-01-11 14:31:05 发布

Faith-J

最新推荐文章于 2024-01-11 14:31:05 发布

阅读量275

点赞数

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/JCM_ZZ/article/details/116005972

版权

该博客介绍了如何在Vue项目中实现轮询和重连功能，适用于新消息实时刷新场景。当用户登录有效时，设置定时器每隔15秒发起请求。如果请求失败，会尝试重连，最多重试3次。在组件销毁前，会清理定时器，确保资源释放。整个逻辑保证了请求的时序性和可靠性。

摘要由CSDN通过智能技术生成

Vue 脚手架项目，轮询完整实现，适合新消息刷新等逻辑

已实现逻辑

1. 轮询
2. 调用
3. 重连
4. 时序性

/**** App.vue ****/
<script>
	/* 失败时，设置三次重连 */
	let errCount = 3
	export default {
		data() {
			return {
				timer: null,
				token: 'token',
				errCount 
			}
		},
		watch: {
			/* 监听用户登录是否有效 */
			token: {
				handler(){
					if (this.token) { /* 当用户登录有效时发起请求 */
						this.request()
						this.$once("hook:beforeDestroy", ()=>{ /* 组件销毁前进行定时清除 */
							clearTimeout(this.timer)
						})
					} else {
						clearTimeout(this.timer)
					}
				},
				immediate: true
			}
		},
		methods: {
			request() {
				/* 当拿到响应后，进行polling，顺延15秒再次发起求，避免服务器已经停止工作或响应慢时频繁发起请求 */
				getMessage()
					.then(()=>{
						/* 恢复重连次数 */
						this.errCount = errCount
						
						/********
								业务逻辑
										********/
										
						this.polling()
					})
					.catch(err=>{
						if (this.errCount) {
							/* 每失败一次，进行一次减减 */
							this.errCount--
							this.polling()
						} else {
							/* 提示刷新页面或查看网络连接 */
						}
					})
			},
			polling(){
				/* 调用前进行定时清除 */
				clearTimeout(this.timer)
				this.timer = setTimeout(this.request, 1000 * 15 /* 15秒 */)
			}
		}
	}
</script>