vue axios轮询请求数据

点击执行,轮询查询此条数据的状态

<el-button :disabled='!scope.row.status || scope.row.executeStatus == 2' @click="handleClick(scope.row)" type="text" size="small">{{scope.row.executeStatus == 2?'执行中':'手动执行'}}</el-button>
  // 操作 手动执行按钮
    handleClick(row) {
      this.$http.post(this.$api.engineExecuteTask, {
        id: row.id
      })
        .then(res => {
          if (res.data.code == 200) {
            this.timers(row)
          }
        })
    },
    // 轮询
    timers(row) {
      let cont = 0
      let _this = this
      this.$refs.listview.refresh({ status: this.typeValue })
      this.SessionList = JSON.parse(window.sessionStorage.getItem('SessionList')) || []
      // 数组去重,如果点击的任务在sessionStore里有就不添加
      this.SessionList.forEach(item => {
        if (item.id == row.id) {
          cont = cont + 1
        }
      })
      if (cont == 0) {
        this.SessionList.push({
          id: row.id,
          taskName: row.taskName
        })
      }
      window.sessionStorage.setItem('SessionList', JSON.stringify(this.SessionList))
      // 清除定时器
      clearInterval(this.timer)
      // 定时器轮询后台接口
      this.timer = setInterval(function() {
        let arr = []
        _this.SessionList.forEach(item => {
          arr.push(item.id)
        })
        if (arr.length == 0) {
          clearInterval(_this.timer)
        } else {
          console.log(_this.$api.engineGetStatus)
          _this.$http.post(_this.$api.engineGetStatus, {
            ids: arr
          })
            .then(res => {
              console.log(res.data.data)
              res.data.data.forEach((items, ind) => {
                // 根据后台任务执行的状态,保留执行中的任务,清除执行成功和执行失败的任务
                if (items.status !== 2) {
                  _this.$refs.listview.refresh({ status: _this.typeValue })
                  // 循环遍历sessionStorage里的任务,找到任务执行完成或失败的并清除
                  _this.SessionList.forEach((item, index) => {
                    if (item.id == items.id) {
                      if (items.status == 0) {
                        _this.messageBbox(true, item.taskName + '任务手动执行成功', 'success')
                      } else {
                        _this.messageBbox(true, item.taskName + '任务手动执行失败', 'error')
                      }
                      _this.SessionList.splice(index, 1)
                      window.sessionStorage.setItem('SessionList', JSON.stringify(_this.SessionList))
                    }
                  })
                }
              })
            })
        }
      }, 5000)
    },
    // message 提示
    messageBbox(close, message, type) {
      this.$message({
        showClose: close,
        message: message,
        type: type
      })
    },

点击手动执行请求接口,然后轮询获取状态

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值