vue輪詢請求如何實現

今天小編給大家分享一下vue輪詢請求如何實現的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

輪詢的理解

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

業務描述：

1. 頁面初始化顯示第一頁數據，隨后每隔十秒當前頁數據刷新

2. 更改篩選條件或者更改頁碼直接刷新數據，隨后每個十秒當前也數據刷新

業務邏輯點分析：

1. 手動調用時，立即執行發起請求

2. 隨后每隔十秒執行一次，刷新一次列表

實現思路

1. 直接先調用請求

2. 在請求的成功回調函數中設置定時器setTimeout

3. 在定時器內重復1.2操作

4. 將1.2.3步驟封裝為遞歸函數

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

為什么不采用setInterval

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

需要注意的地方

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

完整偽代碼

<script>
export default {
  data () {
    return {
      pollingST: null
    }
  },
  methods: {
    // 分頁change事件
    pageChange (params) {
      // 清除現有定時器
      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>

以上就是“vue輪詢請求如何實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。