vue轮询请求解决方案的完整实例
短信预约 -IT技能 免费直播动态提醒
轮询的理解
其实轮询的重点在于间隔多少时间执行一次，而并非循环本身。ajax是异步请求，从发起请求到接受到响应即为一个完整的过程，这个过程所需要的时间是无法预料的，说的极端点，若请求所需的时间超过了我们轮询的间隔时间，那么是会出现很多问题的，所以轮询的间隔应该是在确保这个请求过程完成的基础之上的，这也更符合逻辑。
业务描述：
- 页面初始化显示第一页数据，随后每隔十秒当前页数据刷新
- 更改筛选条件或者更改页码直接刷新数据，随后每个十秒当前也数据刷新
业务逻辑点分析：
- 手动调用时，立即执行发起请求
- 随后每隔十秒执行一次，刷新一次列表
实现思路
- 直接先调用请求
- 在请求的成功回调函数中设置定时器setTimeout
- 在定时器内重复1.2操作
- 将1.2.3步骤封装为递归函数
// 轮询方法
polling (page) {
this.getWorks(page).then(res => {
this.pollingST = setTimeout(() => {
clearTimeout(this.pollingST)
this.polling(page)
}, 10000)
})
}
为什么不采用setInterval
setInterval的功能看似是完美符合轮询的概念，若我们的操作是同步代码，那么使用setInterval是没有任何问题的，问题就出在setInterval不够灵活，我们无法得知上一次请求是否已经完毕。所以setTimeout会更好一些。
需要注意的地方
在轮询中我将定时器用pollingST变量记录了下来，每次执行前必须先清除上一个定时器，因为递归的调用是在定时器内部，所以通过清除定时器就能很方便的结束轮询
完整伪代码
<script>
export default {
data () {
return {
pollingST: null
}
},
methods: {
// 分页change事件
pageChange (params) {
// 清除现有定时器
clearTimeout(this.pollingST)
// 调用轮询
this.polling(params)
},
// 请求接口方法
getWorks () {
return new Promise(resolve => resolve({}))
},
// 轮询方法
polling (params) {
this.getWorks(params).then(res => {
this.pollingST = setTimeout(() => {
clearTimeout(this.pollingST)
this.polling(params)
}, 10000)
})
}
},
created () {
// 调用轮询
this.polling({ page: 1, pageSize: 5 })
},
destroyed () {
clearTimeout(this.pollingST)
}
}
</script>
总结
到此这篇关于vue轮询解决方案的文章就介绍到这了,更多相关vue轮询解决内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
