vue輪詢請求解決方案的完整實例

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

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

輪詢的理解

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

業(yè)務描述：

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

業(yè)務邏輯點分析：

手動調用時，立即執(zhí)行發(fā)起請求
隨后每隔十秒執(zhí)行一次，刷新一次列表

實現(xiàn)思路

直接先調用請求
在請求的成功回調函數(shù)中設置定時器setTimeout
在定時器內重復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不夠靈活，我們無法得知上一次請求是否已經完畢。所以setTimeout會更好一些。

需要注意的地方

在輪詢中我將定時器用pollingST變量記錄了下來，每次執(zhí)行前必須先清除上一個定時器，因為遞歸的調用是在定時器內部，所以通過清除定時器就能很方便的結束輪詢

完整偽代碼

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