vue ajax轮训,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不够灵活&#x