vue中数据状态轮询

vue中数据状态轮询

1、数据接口和状态接口是分开的

首先在页面挂在后请求数据,然后判断数据中状态是否有需要轮询的,有的话就轮询:

javascript 复制代码
async getTableDataList() {
      this.tableLoading = true;
      try {
        let params = {
          page: this.dataPage,
          page_size: this.dataPagesize,
        }
        const res = await this.$axios.get(`url`, { params });
        if (res.data.code == 200) {
          this.tableLoading = false;
          this.dataTableData = res.data.data;          
          this.dataTotalNumber = res.data.paging.total;
          let isExistAnalyzing = this.dataTableData.find((item) => {
            if (item.status == 1) {
              return item;
            }
          });
          //如果存在分析中的数据
          if (isExistAnalyzing) {
            this.pollStatus();
          } else {
            this.endPollStatus()
          }
        } else {
          this.tableLoading = false;
          this.dataTableData = [];
        }
      } catch (err) {
        console.log(err);
      }
},

要在data中定义定时器:

javascript 复制代码
data() {
    return {
      pollStatusTimer: null,
    }
}

轮询和结束轮询一级状态接口如下:

javascript 复制代码
pollStatus() {
   this.endPollStatus(this.pollStatusTimer);//防止有未清除的定时器
   this.pollStatusTimer = setTimeout(() => {
      this.getDatasetStatus();
   }, 3000);
},
endPollStatus() {
  clearTimeout(this.pollStatusTimer);
},
async getDatasetStatus() {
      const res = await this.$axios.get(
        `url`
      );
      if (res.data.code == 200) {
        let statusList = res.data.data;
        this.dataTableData.forEach((item) => {
          statusList.forEach((el) => {
            if (item.id == el.id) {
              item.status = el.status;
              item.studyCount = el.studyCount;
              item.progress = el.progress == null ? 0 : Number(el.progress);
            }
          });
        });

        let incomplete = statusList.find((item) => {
          if (item.status == 1) {
            return item;
          }
        });
        if (incomplete) {
          this.pollStatus();
        } else {
          this.endPollStatus();
        }
      }
},

最后,要在组件销毁前清空定时器,防止内存泄漏

2、无单独的状态接口

如果没有单独的状态接口,把状态方法getDatasetStatus换成数据方法getTableDataList即可

相关推荐
拓端研究室36 分钟前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子2 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W3 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程4 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083165 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头6 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's6 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js