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即可

相关推荐
苏打水com21 分钟前
JavaScript 企业面试与学习难度拆解:从0到中高级的阶梯式路线图
javascript
晓得迷路了23 分钟前
栗子前端技术周刊第 101 期 - React 19.2、Next.js 16 Beta、pnpm 10.18...
前端·javascript·react.js
玲小珑33 分钟前
LangChain.js 完全开发手册(十四)生产环境部署与 DevOps 实践
前端·langchain·ai编程
亿元程序员36 分钟前
有了AI,游戏开发新人还有必要学Cocos游戏开发吗?
前端
Mike_jia39 分钟前
Alist终极指南:一键聚合20+云存储,打造私有化文件管理中枢
前端
IT_陈寒1 小时前
Redis性能翻倍秘籍:10个99%开发者不知道的冷门配置优化技巧
前端·人工智能·后端
LinXunFeng1 小时前
Flutter - Melos Pub workspaces 实践
前端·flutter·架构
艾小码1 小时前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript
灵感__idea9 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡10 小时前
CSS是什么?—— 网页的“化妆师”
前端·css