快捷導(dǎo)航

vue輪詢請(qǐng)求解決方案的完整實(shí)例

更新時(shí)間：2021年07月01日 10:36:06 作者：無知散人

項(xiàng)目開發(fā)中需要做一個(gè)輪詢,所以將實(shí)現(xiàn)的過程記錄了一下,下面這篇文章主要給大家介紹了關(guān)于vue輪詢解決方案的相關(guān)資料,需要的朋友可以參考下

輪詢的理解

其實(shí)輪詢的重點(diǎn)在于間隔多少時(shí)間執(zhí)行一次，而并非循環(huán)本身。ajax是異步請(qǐng)求，從發(fā)起請(qǐng)求到接受到響應(yīng)即為一個(gè)完整的過程，這個(gè)過程所需要的時(shí)間是無法預(yù)料的，說的極端點(diǎn)，若請(qǐng)求所需的時(shí)間超過了我們輪詢的間隔時(shí)間，那么是會(huì)出現(xiàn)很多問題的，所以輪詢的間隔應(yīng)該是在確保這個(gè)請(qǐng)求過程完成的基礎(chǔ)之上的，這也更符合邏輯。

業(yè)務(wù)描述：

頁面初始化顯示第一頁數(shù)據(jù)，隨后每隔十秒當(dāng)前頁數(shù)據(jù)刷新
更改篩選條件或者更改頁碼直接刷新數(shù)據(jù)，隨后每個(gè)十秒當(dāng)前也數(shù)據(jù)刷新

業(yè)務(wù)邏輯點(diǎn)分析：

手動(dòng)調(diào)用時(shí)，立即執(zhí)行發(fā)起請(qǐng)求
隨后每隔十秒執(zhí)行一次，刷新一次列表

實(shí)現(xiàn)思路

直接先調(diào)用請(qǐng)求
在請(qǐng)求的成功回調(diào)函數(shù)中設(shè)置定時(shí)器setTimeout
在定時(shí)器內(nèi)重復(fù)1.2操作
將1.2.3步驟封裝為遞歸函數(shù)

// 輪詢方法
    polling (page) {
      this.getWorks(page).then(res => {
        this.pollingST = setTimeout(() => {
          clearTimeout(this.pollingST)
          this.polling(page)
        }, 10000)
      })
    }

為什么不采用setInterval

setInterval的功能看似是完美符合輪詢的概念，若我們的操作是同步代碼，那么使用setInterval是沒有任何問題的，問題就出在setInterval不夠靈活，我們無法得知上一次請(qǐng)求是否已經(jīng)完畢。所以setTimeout會(huì)更好一些。

需要注意的地方

在輪詢中我將定時(shí)器用pollingST變量記錄了下來，每次執(zhí)行前必須先清除上一個(gè)定時(shí)器，因?yàn)檫f歸的調(diào)用是在定時(shí)器內(nèi)部，所以通過清除定時(shí)器就能很方便的結(jié)束輪詢

完整偽代碼

<script>
export default {
  data () {
    return {
      pollingST: null
    }
  },
  methods: {
    // 分頁change事件
    pageChange (params) {
      // 清除現(xiàn)有定時(shí)器
      clearTimeout(this.pollingST)
      // 調(diào)用輪詢
      this.polling(params)
    },
    // 請(qǐng)求接口方法
    getWorks () {
      return new Promise(resolve => resolve({}))
    },
    // 輪詢方法
    polling (params) {
      this.getWorks(params).then(res => {
        this.pollingST = setTimeout(() => {
          clearTimeout(this.pollingST)
          this.polling(params)
        }, 10000)
      })
    }
  },
  created () {
    // 調(diào)用輪詢
    this.polling({ page: 1, pageSize: 5 })
  },
  destroyed () {
    clearTimeout(this.pollingST)
  }
}
</script>