Vue 轮询发请求 查某数据(pollingTimeout、setTimeout )

需求说明:需要查订单的各个状态:正常、处理中、异常…… ; 如果处理中的数量不为0 ,则一直轮询发请求查,直到处理中数量为0再停止;另外切换页面了就不查了;

代码如下:
这是我要的数据对象 processingCount 不为0 就一直请求

getOrderStatusTotal: {
      errorCount: null, //异常总
      successCount: null, //处理成功总
      processingCount: null, //处理中总
      //……
    },

轮询方法如下:

//调接口获取各订单状态的数量  轮询  直到 处理中数量为 0
    getOrderTotal() {
      // var num = 5		模拟轮询测试
      let vm = this
      let polling = () => {
        axios.get('yourUrl').then(res => {
          this.getOrderStatusTotal = res
          // this.getOrderStatusTotal.processingCount = num--
          if (this.getOrderStatusTotal.processingCount > 0) {
            // console.log('剩余等待数:', num)
            vm.pollingTimeout = setTimeout(() => {
              polling()
            }, 3000)
          }
        })
      }
      polling()
    },

注意:为了避免切换页面还在轮询,在跳转页面时也需要清除定时器,不然会一直占用服务器资源。在vue的生命周期函数beforeDestroy中做如下处理:

 destroyed() {
    clearTimeout(this.pollingTimeout)
  },

你可能感兴趣的:(Vue,vue,vue.js)