最近修改的項目中,有一個ai的內(nèi)容,大致就是傳遞id給后端,前端不斷地詢問這個接口直到返回正確的結(jié)果的過程。這個過程中就會使用到定時器setTimeout。
在vue中寫定時器,一定要放到date里,使用thisxxx把setTimeout賦值給某個全局變量,為什么需要這樣做,我們后面說。
為了方便和節(jié)省瀏覽器性能,首先需要設(shè)置最大輪詢次數(shù)和輪詢時間,直接var即可。
然后我們創(chuàng)建一個簡單的箭頭函數(shù)(也是為了確保能訪問到this),箭頭函數(shù)中每次訪問都需要使一個變量增加,然后判斷是否大于設(shè)定的輪詢最大次數(shù),大于則return掉。
接下來是一個請求,我們要根據(jù)后端設(shè)置的內(nèi)容,判斷是否滿足我們的要求。大家可以看一下我下邊的判斷,首先判斷接口是否是正常通信的,如果是200,則會返回res,如果是錯誤,則會返回err并彈出錯誤原因并停止定時器。如果返回res后,后端的狀態(tài)返回2000并且狀態(tài)為completed完成則把a(bǔ)i返回的內(nèi)容賦值,并且清除定時器,如果不是2000,則判斷是否有報錯,沒有報錯則繼續(xù)輪詢。這里最重要的點就是重新給this.pollTimer賦值,重新賦值后,根據(jù)我們設(shè)定的輪詢間隔時間,時間到達(dá)后會再次請求我們設(shè)置的箭頭函數(shù),直到狀態(tài)為completed為止。
我們之前說的,為什么一定要把定時器賦值給變量,因為定時器一定要清除,不光是在本頁面清除,當(dāng)該路由頁面卸載的時候,也需要清除,避免跳轉(zhuǎn)到其他頁面后,這個定時器還一直請求接口。