vue輪詢請求問題怎么解決

本篇內容主要講解“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輪詢請求問題怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！