本篇内容主要讲解“vue轮询请求问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue轮询请求问题怎么解决”吧!
轮询的理解
其实轮询的重点在于间隔多少时间执行一次,而并非循环本身。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>