鍍金池/ 問答/HTML/ vue使用axios輪詢請求方案

vue使用axios輪詢請求方案

頁面上需要顯示一段時刻在變化的數(shù)據(jù)，數(shù)據(jù)的來源只能通過請求接口得到。希望老司機們可以給個方案或思路。

目前的采取的方案：
①在vue項目中定義一個定時器每隔2秒進行一次axios請求。
②在vue項目中當axios請求成功返回后再重新請求（子子孫孫無窮盡）。

在多次的請求中，發(fā)現(xiàn)中途偶爾會有超時的情況出現(xiàn)，如果采用方案②，顯然不合適。
如果采用方案①，因為異步請求的緣故會出現(xiàn)多個同樣的請求一起在處于pending狀態(tài)，且返回時會有時間差。（不知該如何設置：相同的請求隊列，前面的請求被終止）

回答
編輯回答
有點壞
  1. 首先應該考慮websocket。
  2. 在多次的請求中，發(fā)現(xiàn)中途偶爾會有超時的情況出現(xiàn)，如果采用方案②，顯然不合適。

    這僅僅是需要被處理的異常情況，因為無論哪種情況都有可能超時或出現(xiàn)網(wǎng)絡錯誤，這本來就是應該需要考慮和處理的部分，而不是可以排除的部分，哪怕你用方案1或者websocket。

  3. 如果采用方案1，那問題就多了。

    • 由于同源請求在瀏覽器上僅允許6個TCP連接（chrome），如果處理不及時，會出現(xiàn)一堆在Queuing/Stalled狀態(tài)的請求。
    • 相同的請求會受緩存鎖影響，處于Stalled狀態(tài)。
    • 由于瀏覽器會重用TCP連接，如果此時原本的多個同源TCP連接不可用，將會長期處于Stalled狀態(tài)持續(xù)等待。

PS: 關于上訴第3點中所提的問題，可參考 Network Resource Timing 的Queuing和Stalled部分。

2018年7月6日 15:59
編輯回答
病癮

可以嘗試用遞歸的方式，在成功回調(diào)里設置2秒再次請求

clipboard.png

2018年7月1日 02:56
編輯回答
裸橙

回調(diào)中再調(diào)用自己，會遇到js遞歸深度限制的問題。
所以，采用定時器較好。
你設置一下ajax的超時時間就好了，定時器與這個時間一樣就不會出現(xiàn)重復的情況了。
另外，新請求之前取消之前的請求也是可以的。

2017年6月13日 04:18
編輯回答
爛人

我也推薦樓上推薦的websocket。
你這個屬于即時通信了，具體例子可見本網(wǎng)站的消息通知。
用的是socket.io

2017年12月24日 17:02
編輯回答
安淺陌

這時候就體現(xiàn)出用setTimeout代替setInterval的好處了，題主不妨自行百度下orGoogle下

2017年4月19日 21:59