別只背詞表！3個(gè)實(shí)戰(zhàn)場景手寫實(shí)現(xiàn)輪詢邏輯，搞定開發(fā)痛點(diǎn)
學(xué)會(huì)語法卻不知怎么搭項(xiàng)目，這是很多開發(fā)者從新手轉(zhuǎn)正式工時(shí)最大的攔路虎。你背下了 for 循環(huán)、掌握了 async/await，甚至能默寫出 Map 和 Set 的區(qū)別，但一遇到“輪詢”、“輪轉(zhuǎn)”這種需要狀態(tài)機(jī)配合的場景，腦子就一片空白。其實(shí)，所謂的“輪流的近義詞”在代碼世界里，核心就是輪詢（Polling）與輪轉(zhuǎn)（Rotation）。今天咱們不聊虛的，直接上手，通過手寫實(shí)現(xiàn)一個(gè)高可用的輪詢調(diào)度器，把這幾個(gè)概念徹底打通。
入口定位：為什么你的輪詢代碼總出Bug
在深入代碼之前，先厘清概念。很多人把“輪流”當(dāng)成簡單的“下一個(gè)”，但在高并發(fā)后端開發(fā)中，它涉及三個(gè)核心維度：時(shí)間輪詢（定時(shí)檢查）、空間輪轉(zhuǎn)（負(fù)載均衡分發(fā)）、狀態(tài)輪詢（長連接心跳）。
為什么直接 setInterval 會(huì)翻車？因?yàn)榇蠖鄶?shù)初學(xué)者寫的輪詢代碼，存在三個(gè)致命傷：競態(tài)條件：上一次請(qǐng)求沒返回，下一次又發(fā)出去了，導(dǎo)致數(shù)據(jù)錯(cuò)亂。
資源泄漏：組件卸載或頁面跳轉(zhuǎn)后，定時(shí)器沒清理，內(nèi)存暴漲。
死鎖風(fēng)險(xiǎn)：在微服務(wù)架構(gòu)中，如果上游服務(wù)掛起，簡單的輪詢邏輯會(huì)導(dǎo)致線程池耗盡。我們今天要解析的源碼，參考了 Node.js 核心模塊 timers 的設(shè)計(jì)思想，并結(jié)合了 GitHub 開源倉庫 node-polling 中的生產(chǎn)級(jí)處理方案。這個(gè)倉庫在 GitHub 上有 2.3k Star，其核心邏輯被大量用于實(shí)時(shí)數(shù)據(jù)大屏。我們的目標(biāo)，就是手寫實(shí)現(xiàn)一個(gè)具備“防抖、單飛（Single-flight）、自動(dòng)清理”能力的輪詢引擎。
核心片段：拆解狀態(tài)機(jī)與定時(shí)器調(diào)度
很多人以為輪詢就是 setTimeout 套娃，大錯(cuò)特錯(cuò)。真正的輪詢引擎，核心在于狀態(tài)機(jī)與定時(shí)器隊(duì)列的協(xié)作。下面這段代碼是我們自研調(diào)度器的核心部分，它解決了“請(qǐng)求未返回時(shí)禁止發(fā)起新請(qǐng)求”的問題。
// 語言: JavaScript (ES6+)
class PollingEngine {constructor(url, options = {}) {this.url = url;this.options = options;this.timerId = null;this.isPolling = false; // 核心狀態(tài)：是否正在等待響應(yīng)this.isDestroyed = false; // 銷毀標(biāo)記this.onSuccess = options.onSuccess || (() = {});this.onError = options.onError || (() = {});this.delay = options.delay || 5000; // 默認(rèn)5秒輪詢一次}// 啟動(dòng)輪詢start() {if (this.isDestroyed) return;this._execute();}// 核心執(zhí)行邏輯async _execute() {// 1. 關(guān)鍵防抖：如果上一次請(qǐng)求還在飛，直接跳過本次調(diào)度if (this.isPolling) {console.warn('Previous poll request is still pending, skipping.');return;}this.isPolling = true;try {// 2. 發(fā)起異步請(qǐng)求，這里模擬了一個(gè)帶超時(shí)的 Fetchconst response = await this._fetchWithTimeout(this.url);// 3. 處理成功邏輯，注意這里必須放在 finally 之前重置狀態(tài)this.onSuccess(response.data);} catch (error) {// 4. 處理失敗，避免錯(cuò)誤導(dǎo)致輪詢停止this.onError(error);} finally {// 5. 無論成功失敗，必須重置狀態(tài)，并重新調(diào)度this.isPolling = false;// 6. 如果引擎未銷毀，則設(shè)置下一次定時(shí)器if (!this.isDestroyed) {this.timerId = setTimeout(() = this._execute(), this.delay);}}}// 封裝帶超時(shí)的 Fetch，防止網(wǎng)絡(luò)掛起_fetchWithTimeout(url, timeout = 3000) {return new Promise((resolve, reject) = {const controller = new AbortController();const timer = setTimeout(() = {controller.abort();reject(new Error('Polling timeout'));}, timeout);fetch(url, { signal: controller.signal }).then(res = {clearTimeout(timer);if (!res.ok) throw new Error(`HTTP ${res.status}`);return res.json();}).then(data = resolve({ data })).catch(err = {clearTimeout(timer);reject(err);});});}// 停止輪詢，清理資源stop() {this.isDestroyed = true;if (this.timerId) {clearTimeout(this.timerId);this.timerId = null;}this.isPolling = false;}
}逐行解析重點(diǎn)：isPolling 標(biāo)志位：這是整個(gè)邏輯的靈魂。很多新手代碼里，定時(shí)器是固定間隔觸發(fā)的，不管上一次請(qǐng)求完沒完。這里通過布爾值鎖，確保串行執(zhí)行。如果網(wǎng)絡(luò)慢，第2次請(qǐng)求會(huì)自動(dòng)跳過，直到第1次返回。
finally 塊：無論請(qǐng)求成功還是失?。òňW(wǎng)絡(luò)超時(shí)），isPolling 必須重置為 false。否則，一旦遇到一次網(wǎng)絡(luò)抖動(dòng)，輪詢就會(huì)永久卡死，再也不發(fā)起請(qǐng)求了。
_fetchWithTimeout：瀏覽器原生的 fetch 如果沒有 signal，在弱網(wǎng)環(huán)境下可能會(huì)掛起幾十秒。我們手動(dòng)實(shí)現(xiàn)了超時(shí)中斷，這是生產(chǎn)環(huán)境必備的技能。
stop 方法：在 React 或 Vue 組件卸載時(shí)調(diào)用，防止內(nèi)存泄漏。很多“學(xué)會(huì)語法卻不知怎么搭項(xiàng)目”的痛點(diǎn)，就出在不知道什么時(shí)候該 stop。設(shè)計(jì)思想：從“輪流”到“輪轉(zhuǎn)”的架構(gòu)升級(jí)
上面的代碼解決了“單點(diǎn)輪詢”的問題，但在分布式系統(tǒng)中，我們需要的是空間輪轉(zhuǎn)。比如，你有10臺(tái)服務(wù)器，請(qǐng)求需要輪流打到不同節(jié)點(diǎn)上，而不是全部打到第一臺(tái)。
這里引入一個(gè)經(jīng)典算法：一致性哈希與隨機(jī)輪詢的結(jié)合。但在前端或輕量級(jí)后端，我們通常使用加權(quán)輪詢（Weighted Round-Robin）。
設(shè)計(jì)思想核心：無狀態(tài)性：輪詢器本身不存儲(chǔ)業(yè)務(wù)數(shù)據(jù)，只負(fù)責(zé)調(diào)度。業(yè)務(wù)邏輯交給回調(diào)函數(shù) onSuccess。
可插拔性：通過 options 注入不同策略。比如，你可以傳入一個(gè) nextServer() 函數(shù)，讓輪詢器在每次請(qǐng)求前調(diào)用它，獲取下一個(gè)服務(wù)器地址。
容錯(cuò)隔離：單個(gè)輪詢實(shí)例的崩潰，不應(yīng)影響其他實(shí)例。這也是為什么我們使用 class 實(shí)例化，而不是全局單例。進(jìn)階技巧：自適應(yīng)輪詢頻率
在實(shí)際項(xiàng)目中，固定 5 秒輪詢太浪費(fèi)資源，固定 100 毫秒又太頻繁。GitHub 開源倉庫 adaptive-polling 提出了一種指數(shù)退避策略：如果連續(xù) 3 次請(qǐng)求返回?cái)?shù)據(jù)有變化，縮短輪詢間隔（例如從 5s 變 2s），因?yàn)閿?shù)據(jù)活躍。
如果連續(xù) 10 次請(qǐng)求數(shù)據(jù)無變化，延長輪詢間隔（例如從 5s 變 15s），節(jié)省帶寬。這種動(dòng)態(tài)調(diào)整的思想，比死板的“輪流”要高級(jí)得多。它讓系統(tǒng)具備了“感知”能力，是區(qū)分初級(jí)開發(fā)和資深開發(fā)的關(guān)鍵分水嶺。
手寫簡化版：Vue 3 組合式函數(shù)實(shí)戰(zhàn)
光看 JS 類不夠，我們把它封裝成 Vue 3 的 Composable，這才是前端開發(fā)的真實(shí)場景。很多教程只教你 setInterval，卻忽略了組件生命周期。
// 語言: TypeScript (Vue 3 Composition API)
import { ref, onUnmounted, getCurrentInstance } from 'vue';interface PollingOptions {url: string;delay?: number;immediate?: boolean;onData?: (data: any) = void;onError?: (error: Error) = void;
}export function usePolling(options: PollingOptions) {const data = refany(null);const error = refError | null(null);const isPolling = ref(false);let timerId: ReturnTypetypeof setTimeout | null = null;let isDestroyed = false;const { url, delay = 5000, immediate = true, onData, onError } = options;const fetchData = async () = {// 防止并發(fā)請(qǐng)求if (isPolling.value) return;isPolling.value = true;error.value = null;try {const controller = new AbortController();const timeoutId = setTimeout(() = controller.abort(), 3000);const response = await fetch(url, { signal: controller.signal });clearTimeout(timeoutId);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const result = await response.json();data.value = result;onData?.(result);} catch (err: any) {if (err.name === 'AbortError') {error.value = new Error('請(qǐng)求超時(shí)');} else {error.value = err;}onError?.(error.value);} finally {isPolling.value = false;// 組件未銷毀時(shí)，繼續(xù)下一次輪詢if (!isDestroyed) {timerId = setTimeout(fetchData, delay);}}};// 組件掛載時(shí)啟動(dòng)if (immediate) {fetchData();}// 組件卸載時(shí)自動(dòng)清理，這是很多新手忽略的onUnmounted(() = {isDestroyed = true;if (timerId) {clearTimeout(timerId);timerId = null;}});return { data, error, isPolling };
}這段代碼的價(jià)值在于：響應(yīng)式數(shù)據(jù)：data 和 error 都是 ref，直接綁定到模板，無需手動(dòng) DOM 操作。
生命周期綁定：onUnmounted 自動(dòng)清理，解決了“頁面切換后還在請(qǐng)求”的常見 Bug。
類型安全：使用 TypeScript 接口，強(qiáng)制開發(fā)者傳入必要參數(shù)，減少運(yùn)行時(shí)錯(cuò)誤。避坑指南：不要在全局創(chuàng)建輪詢：每個(gè)組件實(shí)例應(yīng)該有獨(dú)立的輪詢器，否則數(shù)據(jù)會(huì)互相覆蓋。
注意 CORS：如果輪詢的是跨域接口，確保后端配置了 CORS，否則 fetch 會(huì)直接拋錯(cuò)，導(dǎo)致輪詢陷入“錯(cuò)誤-重試-錯(cuò)誤”的死循環(huán)。
移動(dòng)端暫停：在 document.visibilitychange 事件中，當(dāng)頁面切到后臺(tái)時(shí)，建議暫停輪詢，節(jié)省用戶流量和電量。應(yīng)用場景：從實(shí)時(shí)大屏到長連接降級(jí)
理解了手寫實(shí)現(xiàn)的輪詢引擎，你就能覆蓋 80% 的實(shí)時(shí)數(shù)據(jù)場景。
場景一：電商庫存實(shí)時(shí)展示
商品詳情頁的庫存變化，不需要 WebSocket 那么重，5 秒一次的輪詢足夠。使用上面的 usePolling，當(dāng)庫存變?yōu)?0 時(shí)，在 onData 回調(diào)中更新 UI 并停止輪詢（stop），節(jié)省資源。
場景二：長連接降級(jí)方案
很多公司喜歡用 WebSocket，但網(wǎng)關(guān)層經(jīng)常限制長連接時(shí)長。當(dāng) WS 斷開時(shí)，自動(dòng)降級(jí)為 HTTP 輪詢。這時(shí)，你的輪詢器需要具備快速重連和心跳檢測能力?？梢栽?_execute 中增加一個(gè) heartbeat 請(qǐng)求，如果連續(xù) 3 次心跳失敗，再嘗試重連 WS。
場景三：日志實(shí)時(shí)追蹤
在 K8s 環(huán)境中，查看 Pod 日志。由于 K8s 的 logs 接口不支持流式推送，只能輪詢。這時(shí)，輪詢間隔需要?jiǎng)討B(tài)調(diào)整：用戶滾動(dòng)到底部時(shí)，間隔縮短；用戶停止?jié)L動(dòng)時(shí)，間隔延長。
為什么強(qiáng)調(diào)“輪流的近義詞”？
因?yàn)樵谟⑽募夹g(shù)文檔中，Polling、Rotation、Round-Robin、Cycling 經(jīng)?；煊?。Polling 側(cè)重于“問”：客戶端主動(dòng)問服務(wù)端“有新數(shù)據(jù)嗎？”。
Rotation 側(cè)重于“轉(zhuǎn)”：負(fù)載均衡器輪流把請(qǐng)求分給不同節(jié)點(diǎn)。
Round-Robin 是算法：嚴(yán)格循環(huán)，A-B-C-A-B-C。搞懂這些細(xì)微差別，你在閱讀 GitHub 開源倉庫源碼時(shí)，就不會(huì)被術(shù)語繞暈。比如看到 RoundRobinScheduler，你就知道這是空間輪轉(zhuǎn)；看到 PollingInterval，你就知道這是時(shí)間輪詢。
結(jié)尾：你的輪詢代碼踩過哪些坑？
技術(shù)沒有銀彈，輪詢只是其中一種權(quán)衡。它比 WebSocket 簡單，比 SSE 靈活，但資源消耗略高。手寫實(shí)現(xiàn)的過程，不是為了造輪子，而是為了理解底層的定時(shí)器機(jī)制、異步狀態(tài)管理和資源清理邏輯。
當(dāng)你能夠熟練地在 Vue 或 React 項(xiàng)目中，寫出一個(gè)內(nèi)存安全、無競態(tài)條件、支持動(dòng)態(tài)間隔的輪詢組件時(shí)，你就真正跨過了“學(xué)會(huì)語法”到“工程實(shí)戰(zhàn)”的門檻。
你在實(shí)際項(xiàng)目中，有沒有遇到過輪詢導(dǎo)致的內(nèi)存泄漏或競態(tài)問題？或者你在使用 WebSocket 和輪詢做選型時(shí)，有什么獨(dú)特的經(jīng)驗(yàn)？
還有什么不懂的？評(píng)論區(qū)留言挨個(gè)回。 輪流的近義詞入門到精通
別只背詞表！3個(gè)實(shí)戰(zhàn)場景手寫實(shí)現(xiàn)輪詢邏輯，搞定開發(fā)痛點(diǎn)
學(xué)會(huì)語法卻不知怎么搭項(xiàng)目，這是很多開發(fā)者從新手轉(zhuǎn)正式工時(shí)最大的攔路虎。你背下了 for 循環(huán)、掌握了 async/await，甚至能默寫出 Map 和 Set 的區(qū)別，但一遇到“輪詢”、“輪轉(zhuǎn)”這種需要狀態(tài)機(jī)配合的場景，腦子就一片空白。其實(shí)，所謂的“輪流的近義詞”在代碼世界里，核心就是輪詢（Polling）與輪轉(zhuǎn)（Rotation）。今天咱們不聊虛的，直接上手，通過手寫實(shí)現(xiàn)一個(gè)高可用的輪詢調(diào)度器，把這幾個(gè)概念徹底打通。
入口定位：為什么你的輪詢代碼總出Bug
在深入代碼之前，先厘清概念。很多人把“輪流”當(dāng)成簡單的“下一個(gè)”，但在高并發(fā)后端開發(fā)中，它涉及三個(gè)核心維度：時(shí)間輪詢（定時(shí)檢查）、空間輪轉(zhuǎn)（負(fù)載均衡分發(fā)）、狀態(tài)輪詢（長連接心跳）。
為什么直接 setInterval 會(huì)翻車？因?yàn)榇蠖鄶?shù)初學(xué)者寫的輪詢代碼，存在三個(gè)致命傷：競態(tài)條件：上一次請(qǐng)求沒返回，下一次又發(fā)出去了，導(dǎo)致數(shù)據(jù)錯(cuò)亂。
資源泄漏：組件卸載或頁面跳轉(zhuǎn)后，定時(shí)器沒清理，內(nèi)存暴漲。
死鎖風(fēng)險(xiǎn)：在微服務(wù)架構(gòu)中，如果上游服務(wù)掛起，簡單的輪詢邏輯會(huì)導(dǎo)致線程池耗盡。我們今天要解析的源碼，參考了 Node.js 核心模塊 timers 的設(shè)計(jì)思想，并結(jié)合了 GitHub 開源倉庫 node-polling 中的生產(chǎn)級(jí)處理方案。這個(gè)倉庫在 GitHub 上有 2.3k Star，其核心邏輯被大量用于實(shí)時(shí)數(shù)據(jù)大屏。我們的目標(biāo)，就是手寫實(shí)現(xiàn)一個(gè)具備“防抖、單飛（Single-flight）、自動(dòng)清理”能力的輪詢引擎。
核心片段：拆解狀態(tài)機(jī)與定時(shí)器調(diào)度
很多人以為輪詢就是 setTimeout 套娃，大錯(cuò)特錯(cuò)。真正的輪詢引擎，核心在于狀態(tài)機(jī)與定時(shí)器隊(duì)列的協(xié)作。下面這段代碼是我們自研調(diào)度器的核心部分，它解決了“請(qǐng)求未返回時(shí)禁止發(fā)起新請(qǐng)求”的問題。
// 語言: JavaScript (ES6+)
class PollingEngine {constructor(url, options = {}) {this.url = url;this.options = options;this.timerId = null;this.isPolling = false; // 核心狀態(tài)：是否正在等待響應(yīng)this.isDestroyed = false; // 銷毀標(biāo)記this.onSuccess = options.onSuccess || (() = {});this.onError = options.onError || (() = {});this.delay = options.delay || 5000; // 默認(rèn)5秒輪詢一次}// 啟動(dòng)輪詢start() {if (this.isDestroyed) return;this._execute();}// 核心執(zhí)行邏輯async _execute() {// 1. 關(guān)鍵防抖：如果上一次請(qǐng)求還在飛，直接跳過本次調(diào)度if (this.isPolling) {console.warn('Previous poll request is still pending, skipping.');return;}this.isPolling = true;try {// 2. 發(fā)起異步請(qǐng)求，這里模擬了一個(gè)帶超時(shí)的 Fetchconst response = await this._fetchWithTimeout(this.url);// 3. 處理成功邏輯，注意這里必須放在 finally 之前重置狀態(tài)this.onSuccess(response.data);} catch (error) {// 4. 處理失敗，避免錯(cuò)誤導(dǎo)致輪詢停止this.onError(error);} finally {// 5. 無論成功失敗，必須重置狀態(tài)，并重新調(diào)度this.isPolling = false;// 6. 如果引擎未銷毀，則設(shè)置下一次定時(shí)器if (!this.isDestroyed) {this.timerId = setTimeout(() = this._execute(), this.delay);}}}// 封裝帶超時(shí)的 Fetch，防止網(wǎng)絡(luò)掛起_fetchWithTimeout(url, timeout = 3000) {return new Promise((resolve, reject) = {const controller = new AbortController();const timer = setTimeout(() = {controller.abort();reject(new Error('Polling timeout'));}, timeout);fetch(url, { signal: controller.signal }).then(res = {clearTimeout(timer);if (!res.ok) throw new Error(`HTTP ${res.status}`);return res.json();}).then(data = resolve({ data })).catch(err = {clearTimeout(timer);reject(err);});});}// 停止輪詢，清理資源stop() {this.isDestroyed = true;if (this.timerId) {clearTimeout(this.timerId);this.timerId = null;}this.isPolling = false;}
}逐行解析重點(diǎn)：isPolling 標(biāo)志位：這是整個(gè)邏輯的靈魂。很多新手代碼里，定時(shí)器是固定間隔觸發(fā)的，不管上一次請(qǐng)求完沒完。這里通過布爾值鎖，確保串行執(zhí)行。如果網(wǎng)絡(luò)慢，第2次請(qǐng)求會(huì)自動(dòng)跳過，直到第1次返回。
finally 塊：無論請(qǐng)求成功還是失?。òňW(wǎng)絡(luò)超時(shí)），isPolling 必須重置為 false。否則，一旦遇到一次網(wǎng)絡(luò)抖動(dòng)，輪詢就會(huì)永久卡死，再也不發(fā)起請(qǐng)求了。
_fetchWithTimeout：瀏覽器原生的 fetch 如果沒有 signal，在弱網(wǎng)環(huán)境下可能會(huì)掛起幾十秒。我們手動(dòng)實(shí)現(xiàn)了超時(shí)中斷，這是生產(chǎn)環(huán)境必備的技能。
stop 方法：在 React 或 Vue 組件卸載時(shí)調(diào)用，防止內(nèi)存泄漏。很多“學(xué)會(huì)語法卻不知怎么搭項(xiàng)目”的痛點(diǎn)，就出在不知道什么時(shí)候該 stop。設(shè)計(jì)思想：從“輪流”到“輪轉(zhuǎn)”的架構(gòu)升級(jí)
上面的代碼解決了“單點(diǎn)輪詢”的問題，但在分布式系統(tǒng)中，我們需要的是空間輪轉(zhuǎn)。比如，你有10臺(tái)服務(wù)器，請(qǐng)求需要輪流打到不同節(jié)點(diǎn)上，而不是全部打到第一臺(tái)。
這里引入一個(gè)經(jīng)典算法：一致性哈希與隨機(jī)輪詢的結(jié)合。但在前端或輕量級(jí)后端，我們通常使用加權(quán)輪詢（Weighted Round-Robin）。
設(shè)計(jì)思想核心：無狀態(tài)性：輪詢器本身不存儲(chǔ)業(yè)務(wù)數(shù)據(jù)，只負(fù)責(zé)調(diào)度。業(yè)務(wù)邏輯交給回調(diào)函數(shù) onSuccess。
可插拔性：通過 options 注入不同策略。比如，你可以傳入一個(gè) nextServer() 函數(shù)，讓輪詢器在每次請(qǐng)求前調(diào)用它，獲取下一個(gè)服務(wù)器地址。
容錯(cuò)隔離：單個(gè)輪詢實(shí)例的崩潰，不應(yīng)影響其他實(shí)例。這也是為什么我們使用 class 實(shí)例化，而不是全局單例。進(jìn)階技巧：自適應(yīng)輪詢頻率
在實(shí)際項(xiàng)目中，固定 5 秒輪詢太浪費(fèi)資源，固定 100 毫秒又太頻繁。GitHub 開源倉庫 adaptive-polling 提出了一種指數(shù)退避策略：如果連續(xù) 3 次請(qǐng)求返回?cái)?shù)據(jù)有變化，縮短輪詢間隔（例如從 5s 變 2s），因?yàn)閿?shù)據(jù)活躍。
如果連續(xù) 10 次請(qǐng)求數(shù)據(jù)無變化，延長輪詢間隔（例如從 5s 變 15s），節(jié)省帶寬。這種動(dòng)態(tài)調(diào)整的思想，比死板的“輪流”要高級(jí)得多。它讓系統(tǒng)具備了“感知”能力，是區(qū)分初級(jí)開發(fā)和資深開發(fā)的關(guān)鍵分水嶺。
手寫簡化版：Vue 3 組合式函數(shù)實(shí)戰(zhàn)
光看 JS 類不夠，我們把它封裝成 Vue 3 的 Composable，這才是前端開發(fā)的真實(shí)場景。很多教程只教你 setInterval，卻忽略了組件生命周期。
// 語言: TypeScript (Vue 3 Composition API)
import { ref, onUnmounted, getCurrentInstance } from 'vue';interface PollingOptions {url: string;delay?: number;immediate?: boolean;onData?: (data: any) = void;onError?: (error: Error) = void;
}export function usePolling(options: PollingOptions) {const data = refany(null);const error = refError | null(null);const isPolling = ref(false);let timerId: ReturnTypetypeof setTimeout | null = null;let isDestroyed = false;const { url, delay = 5000, immediate = true, onData, onError } = options;const fetchData = async () = {// 防止并發(fā)請(qǐng)求if (isPolling.value) return;isPolling.value = true;error.value = null;try {const controller = new AbortController();const timeoutId = setTimeout(() = controller.abort(), 3000);const response = await fetch(url, { signal: controller.signal });clearTimeout(timeoutId);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const result = await response.json();data.value = result;onData?.(result);} catch (err: any) {if (err.name === 'AbortError') {error.value = new Error('請(qǐng)求超時(shí)');} else {error.value = err;}onError?.(error.value);} finally {isPolling.value = false;// 組件未銷毀時(shí)，繼續(xù)下一次輪詢if (!isDestroyed) {timerId = setTimeout(fetchData, delay);}}};// 組件掛載時(shí)啟動(dòng)if (immediate) {fetchData();}// 組件卸載時(shí)自動(dòng)清理，這是很多新手忽略的onUnmounted(() = {isDestroyed = true;if (timerId) {clearTimeout(timerId);timerId = null;}});return { data, error, isPolling };
}這段代碼的價(jià)值在于：響應(yīng)式數(shù)據(jù)：data 和 error 都是 ref，直接綁定到模板，無需手動(dòng) DOM 操作。
生命周期綁定：onUnmounted 自動(dòng)清理，解決了“頁面切換后還在請(qǐng)求”的常見 Bug。
類型安全：使用 TypeScript 接口，強(qiáng)制開發(fā)者傳入必要參數(shù)，減少運(yùn)行時(shí)錯(cuò)誤。避坑指南：不要在全局創(chuàng)建輪詢：每個(gè)組件實(shí)例應(yīng)該有獨(dú)立的輪詢器，否則數(shù)據(jù)會(huì)互相覆蓋。
注意 CORS：如果輪詢的是跨域接口，確保后端配置了 CORS，否則 fetch 會(huì)直接拋錯(cuò)，導(dǎo)致輪詢陷入“錯(cuò)誤-重試-錯(cuò)誤”的死循環(huán)。
移動(dòng)端暫停：在 document.visibilitychange 事件中，當(dāng)頁面切到后臺(tái)時(shí)，建議暫停輪詢，節(jié)省用戶流量和電量。應(yīng)用場景：從實(shí)時(shí)大屏到長連接降級(jí)
理解了手寫實(shí)現(xiàn)的輪詢引擎，你就能覆蓋 80% 的實(shí)時(shí)數(shù)據(jù)場景。
場景一：電商庫存實(shí)時(shí)展示
商品詳情頁的庫存變化，不需要 WebSocket 那么重，5 秒一次的輪詢足夠。使用上面的 usePolling，當(dāng)庫存變?yōu)?0 時(shí)，在 onData 回調(diào)中更新 UI 并停止輪詢（stop），節(jié)省資源。
場景二：長連接降級(jí)方案
很多公司喜歡用 WebSocket，但網(wǎng)關(guān)層經(jīng)常限制長連接時(shí)長。當(dāng) WS 斷開時(shí)，自動(dòng)降級(jí)為 HTTP 輪詢。這時(shí)，你的輪詢器需要具備快速重連和心跳檢測能力?？梢栽?_execute 中增加一個(gè) heartbeat 請(qǐng)求，如果連續(xù) 3 次心跳失敗，再嘗試重連 WS。
場景三：日志實(shí)時(shí)追蹤
在 K8s 環(huán)境中，查看 Pod 日志。由于 K8s 的 logs 接口不支持流式推送，只能輪詢。這時(shí)，輪詢間隔需要?jiǎng)討B(tài)調(diào)整：用戶滾動(dòng)到底部時(shí)，間隔縮短；用戶停止?jié)L動(dòng)時(shí)，間隔延長。
為什么強(qiáng)調(diào)“輪流的近義詞”？
因?yàn)樵谟⑽募夹g(shù)文檔中，Polling、Rotation、Round-Robin、Cycling 經(jīng)?；煊?。Polling 側(cè)重于“問”：客戶端主動(dòng)問服務(wù)端“有新數(shù)據(jù)嗎？”。
Rotation 側(cè)重于“轉(zhuǎn)”：負(fù)載均衡器輪流把請(qǐng)求分給不同節(jié)點(diǎn)。
Round-Robin 是算法：嚴(yán)格循環(huán)，A-B-C-A-B-C。搞懂這些細(xì)微差別，你在閱讀 GitHub 開源倉庫源碼時(shí)，就不會(huì)被術(shù)語繞暈。比如看到 RoundRobinScheduler，你就知道這是空間輪轉(zhuǎn)；看到 PollingInterval，你就知道這是時(shí)間輪詢。
結(jié)尾：你的輪詢代碼踩過哪些坑？
技術(shù)沒有銀彈，輪詢只是其中一種權(quán)衡。它比 WebSocket 簡單，比 SSE 靈活，但資源消耗略高。手寫實(shí)現(xiàn)的過程，不是為了造輪子，而是為了理解底層的定時(shí)器機(jī)制、異步狀態(tài)管理和資源清理邏輯。
當(dāng)你能夠熟練地在 Vue 或 React 項(xiàng)目中，寫出一個(gè)內(nèi)存安全、無競態(tài)條件、支持動(dòng)態(tài)間隔的輪詢組件時(shí)，你就真正跨過了“學(xué)會(huì)語法”到“工程實(shí)戰(zhàn)”的門檻。
你在實(shí)際項(xiàng)目中，有沒有遇到過輪詢導(dǎo)致的內(nèi)存泄漏或競態(tài)問題？或者你在使用 WebSocket 和輪詢做選型時(shí)，有什么獨(dú)特的經(jīng)驗(yàn)？
還有什么不懂的？評(píng)論區(qū)留言挨個(gè)回。