vue輪詢(xún)請求解決方案的完整實(shí)例

輪詢(xún)的理解

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

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

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

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

1. 手動(dòng)調用時(shí)，立即執行發(fā)起請求
2. 隨后每隔十秒執行一次，刷新一次列表

實(shí)現思路

1. 直接先調用請求
2. 在請求的成功回調函數中設置定時(shí)器setTimeout
3. 在定時(shí)器內重復1.2操作
4. 將1.2.3步驟封裝為遞歸函數

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

為什么不采用setInterval

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

需要注意的地方

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

完整偽代碼

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

總結

到此這篇關(guān)于vue輪詢(xún)解決方案的文章就介紹到這了,更多相關(guān)vue輪詢(xún)解決內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！