vue轮询怎样理解？如何实现vue轮询请求？-群英

上一篇：React Hooks使用要注意哪些？一文带你深入了解Hooks 下一篇：JavaScript怎样实现一个简易的登录窗体？

今天给大家分享的是关于vue轮询的内容，本文会给大家介绍对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>

以上就是关于vue轮询及vue轮询请求实现的介绍了，有需要的朋友可以参考本文实例，希望对大家理解vue轮询有帮助，想要了解更多请搜索群英网络以前的文章或继续浏览其他相关的文章。

文本转载自脚本之家