«

vue轮询请求问题怎么解决

时间:2024-4-13 16:35     作者:韩俊     分类: Javascript


本篇内容主要讲解“vue轮询请求问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue轮询请求问题怎么解决”吧!

轮询的理解

其实轮询的重点在于间隔多少时间执行一次,而并非循环本身。ajax是异步请求,从发起请求到接受到响应即为一个完整的过程,这个过程所需要的时间是无法预料的,说的极端点,若请求所需的时间超过了我们轮询的间隔时间,那么是会出现很多问题的,所以轮询的间隔应该是在确保这个请求过程完成的基础之上的,这也更符合逻辑。

业务描述:

  1. 页面初始化显示第一页数据,随后每隔十秒当前页数据刷新

  2. 更改筛选条件或者更改页码直接刷新数据,随后每个十秒当前也数据刷新

  3. 业务逻辑点分析:

    1. 手动调用时,立即执行发起请求

    2. 随后每隔十秒执行一次,刷新一次列表

    3. 实现思路

      1. 直接先调用请求

      2. 在请求的成功回调函数中设置定时器setTimeout

      3. 在定时器内重复1.2操作

      4. 将1.2.3步骤封装为递归函数

      5. // 轮询方法
            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>

标签: javascript vue

热门推荐