在 Vue 中实现与优化轮询技术

轮询(Polling)是一种计算机程序反复检查某个条件或状态的技术,通常用于在一定的时间间隔内不断请求信息或更新数据状态。轮询被广泛应用于前端开发(例如实现页面实时更新)、后端服务监控、网络设备状态检查等场景。

1. 轮询的工作原理

轮询的核心思想是定时发出请求,检查某一状态是否发生变化。但满足某个条件(如状态改变或数据达到期望值)时,轮询停止;否则继续轮询。

轮询可以分为两种主要类型:

1)定时轮询(Fixed Interval Polling):每隔固定时间间隔发送一次请求。

2)指数退避轮询(Exponential Backoff Polling):初始时间间隔较短,随着轮询次数增加,逐渐延长时间间隔。这种方法适合减少频繁请求带来的服务器压力。

2. 轮询的实现方法

轮询的实现方法主要有两种:

1)简单轮询:每隔一段固定的时间发送请求,不管上一次请求是否完成。

2)智能轮询(长轮询):等待上一次请求完成后再发送下一个请求,避免过多的重复请求。

2.1 使用 setInterval

使用 setInterval 可以简单实现定时轮询,适用于较简单的应用场景。

🌰

function pollData() {const intervalId = setInterval(async () => {const response = await fetch('/api/data');const data = await response.json();if (data.status === 'complete') {console.log('Data is ready:', data);clearInterval(intervalId); // 停止轮询} else {console.log('Polling...'); // 状态未完成,继续轮询}}, 2000); // 每 2 秒检查一次
}
pollData();
2.2 使用 setTimeout

相比 setInterval,setTimeout 的优势在于可以在每次请求完成后再触发下一次请求,以确保在处理完前一个请求前不会再发起新的请求。

🌰

function pollData() {const poll = async () => {const response = await fetch('/api/data');const data = await response.json();if (data.status === 'complete') {console.log('Data is ready:', data);} else {console.log('Polling...');setTimeout(poll, 2000); // 继续轮询}};poll();
}
pollData();
2.3 使用递归函数

递归函数配合 async/await 是一种更灵活的轮询方式,适合处理复杂业务逻辑,例如动态改变轮询间隔或异常处理。

🌰

async function pollData(interval) {try {const response = await fetch('/api/data');const data = await response.json();if (data.status === 'complete') {console.log('Data is ready:', data);} else {console.log('Polling...');setTimeout(() => pollData(interval), interval); // 递归调用}} catch (error) {console.error('Error during polling:', error);setTimeout(() => pollData(interval), interval); // 错误处理后继续轮询}
}pollData(2000);
2.4 指数退避轮询 

指数退避(Exponential Backoff)轮询通过延长每次请求间隔降低频繁请求带来的服务器压力。这种方式可以在网络较差或服务器响应慢的情况下应用。

🌰

async function pollData(interval = 1000, maxInterval = 30000) {try {const response = await fetch('/api/data');const data = await response.json();if (data.status === 'complete') {console.log('Data is ready:', data);} else {console.log('Polling...');const nextInterval = Math.min(interval * 2, maxInterval); // 动态增长轮询间隔setTimeout(() => pollData(nextInterval), nextInterval);}} catch (error) {console.error('Error during polling:', error);setTimeout(() => pollData(interval), interval); // 错误后继续轮询}
}pollData();
2.5 带最大尝试次数

为了防止无限轮询,可以设置一个最大尝试次数,在达到限制后停止轮询。这样可以避免请求过多给服务器带来的压力。

🌰

async function pollData(maxAttempts = 10, interval = 2000) {let attempts = 0;const poll = async () => {if (attempts >= maxAttempts) {console.log('Reached maximum attempts, stopping polling.');return; // 停止轮询}attempts += 1;try {const response = await fetch('/api/data');const data = await response.json();if (data.status === 'complete') {console.log('Data is ready:', data);} else {console.log(`Polling attempt ${attempts}`);setTimeout(poll, interval);}} catch (error) {console.error('Polling error:', error);setTimeout(poll, interval); // 错误后继续轮询}};poll();
}
pollData();

3. 结合 Vue 的轮询

在 Vue 中,轮询是一种实现周期性获取服务器数据的方式,通过定时器在组件的生命周期中执行。轮询在 Vue 项目中的实现与普通 JavaScript 轮询方法类似,但借助 Vue 的生命周期钩子和响应式特性,可以更加方便地管理轮询的开启、暂停和停止。

举个 🌰

假设需要每隔 5 秒从服务器端获取一次数据,并在组件销毁时停止轮询。

创建一个 Vue 组件并添加轮询逻辑

<template><div><h1>轮询示例</h1><p>数据:{{ data }}</p></div>
</template><script>
import { ref, onMounted, onUnmounted } from 'vue'
export default {name: 'Polling',setup() {const data = ref(null)let pollingInterval = null// 定义获取数据的方法const fetchData = async () => {try {const response = await fetch('https://jsonplaceholder.typicode.com/posts')const result = await response.json()data.value = result} catch (error) {console.error('数据获取失败:', error)}}// 启动轮询const startPolling = () => {fetchData() // 初次获取pollingInterval = setInterval(fetchData, 5000) // 每隔5秒获取一次}// 停止轮询const stopPolling = () => {if (pollingInterval) {clearInterval(pollingInterval)pollingInterval = null}}// 在组件挂载时启动轮询,在组件卸载时停止轮询onMounted(startPolling)onUnmounted(stopPolling)return {data}}
}
</script>

扩展功能:动态轮询间隔和停止条件

在实际项目中,可能需要更灵活的控制。比如,可以在组件中添加逻辑,根据条件动态调整轮询间隔,或在特定情况下自动停止轮询。

举个 🌰

<template><div><h1>轮询示例</h1><p>数据:{{ data }}</p><button @click='changeActive'>按钮</button></div>
</template>
<script>
import { ref, onMounted, onUnmounted, watch } from 'vue';
export default {name: 'ConditionalPollingExample',setup() {const data = ref(null);const isActive = ref(true); // 轮询开关let pollingInterval = null;const fetchData = async () => {try {const response = await fetch('https://jsonplaceholder.typicode.com/posts');const result = await response.json();data.value = result;} catch (error) {console.error('数据获取失败:', error);}};const startPolling = () => {fetchData();pollingInterval = setInterval(fetchData, 5000);};const stopPolling = () => {if (pollingInterval) {clearInterval(pollingInterval);pollingInterval = null;}};// 动态控制轮询watch(isActive, (newVal) => {if (newVal) {startPolling();} else {stopPolling();}});// 可以通过控制 isActive 启动或停止轮询const changeActive = () => {isActive.value = !isActive.value;};onMounted(() => {if (isActive.value) startPolling();});onUnmounted(stopPolling);return {data,changeActive,};},
};
</script>

🌰 中,通过 isActive 响应式变量来控制轮询的开启和停止。watch 监听 isActive 的值变化,当为 true 时启动轮询,false 时停止轮询。

4. 使用注意事项

1、资源消耗:频繁的轮询会增加服务器负载和带宽消耗,在实际应用中应合理设置轮询间隔,避免频率过高。

2、终止条件:确保轮询有明确的终止条件,如数据状态满足要求或超出最大轮询次数,否则可能会造成无限轮询。

3、错误处理:轮询过程中可能出现网络问题或服务端错误,建议添加重试和错误处理逻辑。

4、其他替代方案:如果服务器支持,可以考虑使用 WebSocket 或 Server-Sent Events(SSE)等实时推送技术替代轮询,以降低服务器压力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/466495.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

内核调度抢占模式——voluntary和full对比

一、背景 在之前的内核调度子系统专栏里&#xff0c;我们已经把调度有关的如CFS调度/RT调度&#xff0c;调度时间片&#xff0c;调度时延&#xff0c;cfs唤醒抢占特性&#xff0c;这些基本概念和细节都讲了一遍。其实这些细节更多的是帮助我们理解调度系统是如何运作的&#x…

【网络原理】关于HTTP状态码以及请求的构造的哪些事

前言 &#x1f31f;&#x1f31f;本期讲解关于HTTP协议的重要的机制~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话不…

Day13杨辉三角

给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 class Solution {public List<List<Integer>> generate(int numRows) {List<List<Integer>> res new Arra…

Docker基本概念汇总(更全面了解Docker)

Docker是一种开源的平台&#xff0c;用于开发、部署和运行应用程序。它通过“容器”技术实现了轻量级虚拟化&#xff0c;使应用程序和其依赖项能够一起打包、部署并运行。以下是Docker基本概念的详细解释。 图片来源网络 1. Docker 容器&#xff08;Container&#xff09; 容…

OpenCV视觉分析之目标跟踪(8)目标跟踪函数CamShift()使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 找到物体的中心、大小和方向。 CamShift&#xff08;Continuously Adaptive Mean Shift&#xff09;是 OpenCV 中的一种目标跟踪算法&#xff0…

【每日刷题】Day151

【每日刷题】Day151 &#x1f955;个人主页&#xff1a; 开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 【模板】01背包_牛客题霸_牛客网 【模板】01背包_牛客题霸_牛客网 //思路&#xff1a;动态规划 #incl…

学习Vue之商城案例(代码+详解)

目前&#xff0c;我们学习Vue的一些基础的知识&#xff0c;那么就让我们做一个像下图这样简单的商城案例吧。 目录 通过脚手架创建项目 安装axios和bootstrap组件 安装axios和bootstrap 在保存的时候不进行格式化校验 初步定义App.vue文件 初步渲染组件页面 根据接口渲染…

【测试】【Debug】vscode中同一个测试用例出现重复

这种是正常的情况 当下面又出现一个 类似python_test->文件夹名->test_good ->test_pad 同一个测试用例出现两次&#xff0c;名称都相同&#xff0c;显然是重复了。那么如何解决&#xff1f; 这种情况是因为在终端利用“pip install pytest”安装 之后&#xff0c;又…

基于C++的决策树C4.5机器学习算法(不调包)

目前玩机器学习的小伙伴&#xff0c;上来就是使用现有的sklearn机器学习包&#xff0c;写两行代码&#xff0c;调调参数就能跑起来&#xff0c;看似方便&#xff0c;实则有时不利于个人能力发展&#xff0c;要知道现在公司需要的算法工程师&#xff0c;不仅仅只是会调参&#x…

Mac解决 zsh: command not found: ll

Mac解决 zsh: command not found: ll 文章目录 Mac解决 zsh: command not found: ll解决方法 解决方法 1.打开bash_profile 配置文件vim ~/.bash_profile2.在文件中添加配置&#xff1a;alias llls -alF键盘按下 I 键进入编辑模式3. alias llls -alF添加完配置后&#xff0c;按…

VBA10-处理Excel的动态数据区域

end获取数据边界 1、基本语法 1-1、示例&#xff1a; 2、配合row和column使用 2-1、示例1 2-2、示例2 此时&#xff0c;不管这个有数值的区域&#xff0c;怎么增加边界&#xff0c;对应的统计数据也会跟着变的&#xff01;

无人车之路径规划篇

无人车的路径规划是指在一定的环境模型基础上&#xff0c;给定无人车起始点和目标点后&#xff0c;按照性能指标规划出一条无碰撞、能安全到达目标点的有效路径。 一、路径规划的重要性 路径规划对于无人车的安全、高效运行至关重要。它不仅能够提高交通效率&#xff0c;减少交…

【前端基础】CSS基础

目标&#xff1a;掌握 CSS 属性基本写法&#xff0c;能够使用文字相关属性美化文章页。 01-CSS初体验 层叠样式表 (Cascading Style Sheets&#xff0c;缩写为 CSS&#xff09;&#xff0c;是一种 样式表 语言&#xff0c;用来描述 HTML 文档的呈现&#xff08;美化内容&#…

一种高度集成的数字化管理平台:城市管理综合执法系统(源码)

什么是城市管理综合执法系统&#xff1f; 城市管理综合执法系统是一种高度集成的数字化管理平台&#xff0c;它旨在通过整合信息技术资源&#xff0c;实现对城市环境、秩序、设施等多方面的综合管理和高效执法。 城市管理综合执法系统通常包含以下几个核心要素和功能&#xff…

【Python】强大的正则表达式工具:re模块详解与应用

强大的正则表达式工具&#xff1a;re模块详解与应用 在编程和数据处理中&#xff0c;字符串的处理是不可避免的一项任务。无论是从文本中提取信息、验证数据格式&#xff0c;还是进行复杂的替换操作&#xff0c;正则表达式&#xff08;Regular Expression&#xff0c;简称Rege…

计算机毕业设计Python+图神经网络手机推荐系统 手机价格预测 手机可视化 手机数据分析 手机爬虫 Django Flask Spark 知识图谱

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

03.DDD六边形架构

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 什么是依赖DDD四层架构六边形架构代码实现 想要详细了解六边形架构&#xff0c;可以看我之前的一篇文章。是对六边形架构原文的翻…

前端开发实现自定义勾选/自定义样式,可复选,可取消勾选

基于后端返回数组实现多选、复选 以下代码基于vue2&#xff0c;如果有需要React/Vue3或者其他框架代码的&#xff0c;可以通过国内直连GPT4o进行代码转换&#xff0c;转换正确率99% 前端代码如下(直接拷贝到你的vue代码即可)&#xff1a; <!-- CustomCheckboxList.vue --&g…

新型智慧城市顶层设计方案(118页word)

文档介绍&#xff1a; 新型智慧城市顶层设计方案是一种全局性、前瞻性的规划&#xff0c;旨在通过整合城市各类资源&#xff0c;运用新一代信息技术&#xff0c;推动城市治理、民生服务、产业发展等领域的全面升级&#xff0c;以实现城市的可持续发展和居民生活质量的提升。该…

nginx-proxy-manager实现反向代理+自动化证书(实战)

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 cnginx-proxy-manager实现反向代理自动化证书 nginx-proxy-manager是什么搭建nginx-proxy-manage…