項目中我們經常需要實現輪詢-每隔幾秒請求一次接口刷新數據

一般都會使用setInterval，但要注意單純使用它會導致頁面卡死，所以一定要清除定時器

setInterval不會清除定時器隊列，每重復執行1次都會導致定時器疊加，最終卡死你的網頁。
但是setTimeout是自帶清除定時器的

mounted () {const timer = window.setInterval(() => {setTimeout(function () {// chooseProduct 自己封裝的axios請求 chooseProduct({'promptKey': 'selectitem','serialNum': '000'}).then(res => {//視情況而定if (res.data.code === 0 ) {// 這里可以寫一些中止輪詢的條件 比如code值返回0時 clearInterval(timer)}})}, 0)}, 2000)// 清除定時器this.$once('hook:beforeDestroy', () => {clearInterval(timer)})}

---

---

封裝

// polling-utils.js/*** @descripting 輪詢功能* @param {String} type 請求類型* @param {String} url 地址 * @param {Object} data 請求數據 * @param {Number} delay 輪詢間隔時間*/export default function polling(type, url, data, delay = 1000) {return new Promise((resolve, reject) =>{ajax[type](url, data).then(res => {if (res.data === 'polling') { // 這個繼續進行輪詢的條件，需要根據自己的需要修改setTimeout(() => {resolve(polling(type, url, data, delay));}, delay)} else {resolve(res);}})})}

使用

import polling from 'utils/polling-utils';polling('post', url, data).then(res => { console.log(res) })

總結

以上是生活随笔為你收集整理的Vue项目实战04 : Vue 轮询接口的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。