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

总结

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

相关文章

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    这篇文章主要介绍了解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法,需要的朋友可以参考下
    2018-01-01
  • vue3+el-table实现行列转换

    vue3+el-table实现行列转换

    在处理文本数据的时候,我们经常会需要把文本数据的行与列进行转换操作,这样更方便查看,本文就详细的介绍了vue3+el-table实现行列转换,感兴趣的可以了解一下
    2021-06-06
  • Vue项目设置多个静态文件及自定义静态文件目录的方案详解

    Vue项目设置多个静态文件及自定义静态文件目录的方案详解

    本文介绍了如何在Vue项目中配置多个静态文件目录,并提供了使用Vite和Webpack实现的示例,通过在vite.config.ts或vue.config.js中引入相关插件和配置,可以轻松实现自定义静态文件目录,希望这些内容对您有所帮助,感兴趣的朋友一起看看吧
    2025-01-01
  • vue移动端项目渲染pdf步骤及问题小结

    vue移动端项目渲染pdf步骤及问题小结

    这篇文章主要介绍了vue移动端项目渲染pdf步骤,vue-pdf的插件在使用的过程中是连连踩坑的,基本遇到3个问题,分别在文中给大家详细介绍,需要的朋友可以参考下
    2022-08-08
  • vue interceptor 使用教程实例详解

    vue interceptor 使用教程实例详解

    本文通过实例代码给大家介绍了vue interceptor 使用,需要的朋友可以参考下
    2018-09-09
  • vue中的加密方式总结

    vue中的加密方式总结

    这篇文章主要为大家详细介绍了vue中常见的加密方式实现,例如js-base64、crypto-js、jsencrypt、bcryptjs,文中的示例代码讲解详细,需要的小伙伴可以参考一下
    2023-11-11
  • Vue中qs插件的使用详解

    Vue中qs插件的使用详解

    这篇文章主要介绍了Vue中qs插件的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue.js动态数据绑定学习笔记

    vue.js动态数据绑定学习笔记

    这篇文章主要为大家详细介绍了vue.js动态数据绑定学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue中Axios中取消请求及阻止重复请求的方法

    Vue中Axios中取消请求及阻止重复请求的方法

    为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,重复发送多次请求,本文主要介绍了Vue中Axios中取消请求及阻止重复请求的方法,感兴趣的可以了解一下
    2022-02-02
  • 利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

    利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

    本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统,这个博客使用Vue做前端框架,Node+express做后端,数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能,需要的朋友可以参考学习。
    2017-04-04

最新评论