vue中数据状态轮询过程

 更新时间:2025年11月22日 14:59:02   作者:活宝小娜  
文章讲述了在Vue中实现数据状态轮询的两种方法,首先,介绍如何在页面挂载后请求数据,并根据数据状态决定是否轮询,在data中定义定时器,并在组件销毁前清空定时器以防止内存泄漏,如果无单独的状态接口,则将状态方法替换为数据方法

vue中数据状态轮询

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

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

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中定义定时器:

data() {
    return {
      pollStatusTimer: null,
    }
}

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

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现动态按钮功能

    vue实现动态按钮功能

    这篇文章主要介绍了vue实现动态按钮功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vite处理html模板插件之vite-plugin-html插件使用

    Vite处理html模板插件之vite-plugin-html插件使用

    这篇文章主要给大家介绍了关于Vite处理html模板插件之vite-plugin-html插件使用的相关资料,Vite是一个现代化的前端构建工具,而vite-plugin-html是Vite的一个插件,用于在构建时自动生成HTML文件,需要的朋友可以参考下
    2023-10-10
  • Vue中methods的this指向问题浅析

    Vue中methods的this指向问题浅析

    相信我们写Vue代码时肯定都会在methods中用过this这个关键字,甚至还打印过this查看其内容。最终发现该实例对象竟然是我们的Vue实例对象
    2022-10-10
  • nuxt静态部署打包相对路径操作

    nuxt静态部署打包相对路径操作

    这篇文章主要介绍了nuxt静态部署打包相对路径操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue网络请求方案原生网络请求和js网络请求库

    vue网络请求方案原生网络请求和js网络请求库

    这篇文章主要为大家介绍了网络请求方案原生网络请求和js网络请求库的过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2021-11-11
  • Vue实现DateRange选择器的禁选功能

    Vue实现DateRange选择器的禁选功能

    在基于Vue.js构建的应用程序中,处理日期选择器是一个常见的需求,尤其是在涉及到日期范围的选择时,Vue提供了多种方式来实现日期选择器的功能,并允许我们对这些组件进行高度定制,本文将深入探讨如何在Vue应用中实现DateRange选择器的禁选功能,需要的朋友可以参考下
    2024-10-10
  • vue element-ui el-table组件自定义合计(summary-method)的坑

    vue element-ui el-table组件自定义合计(summary-method)的坑

    这篇文章主要介绍了vue element-ui el-table组件自定义合计(summary-method)的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue3.2 Composition API项目依赖升级

    vue3.2 Composition API项目依赖升级

    这篇文章主要为大家介绍了vue3.2 Composition API项目依赖升级示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • .html页面引入vue并使用公共组件方式

    .html页面引入vue并使用公共组件方式

    这篇文章主要介绍了.html页面引入vue并使用公共组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue3判断对象是否为空的实现方式

    Vue3判断对象是否为空的实现方式

    这篇文章主要介绍了Vue3判断对象是否为空的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-07-07

最新评论