快捷導(dǎo)航

vue中數(shù)據(jù)狀態(tài)輪詢過程

更新時間：2025年11月22日 14:59:02 作者：活寶小娜

文章講述了在Vue中實現(xiàn)數(shù)據(jù)狀態(tài)輪詢的兩種方法,首先,介紹如何在頁面掛載后請求數(shù)據(jù),并根據(jù)數(shù)據(jù)狀態(tài)決定是否輪詢,在data中定義定時器,并在組件銷毀前清空定時器以防止內(nèi)存泄漏,如果無單獨的狀態(tài)接口,則將狀態(tài)方法替換為數(shù)據(jù)方法

vue中數(shù)據(jù)狀態(tài)輪詢

1、數(shù)據(jù)接口和狀態(tài)接口是分開的

首先在頁面掛在后請求數(shù)據(jù)，然后判斷數(shù)據(jù)中狀態(tài)是否有需要輪詢的，有的話就輪詢：

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;
            }
          });
          //如果存在分析中的數(shù)據(jù)
          if (isExistAnalyzing) {
            this.pollStatus();
          } else {
            this.endPollStatus()
          }
        } else {
          this.tableLoading = false;
          this.dataTableData = [];
        }
      } catch (err) {
        console.log(err);
      }
},

要在data中定義定時器：

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

輪詢和結(jié)束輪詢一級狀態(tài)接口如下：

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();
        }
      }
},

最后，要在組件銷毀前清空定時器，防止內(nèi)存泄漏