前端轮询请求

一、轮询技术简介

轮询（Polling） 是前端实现准实时数据更新的经典技术方案，其核心原理是通过定时器周期性向服务端发起请求，获取最新数据状态。与 WebSocket 等全双工通信相比，轮询具有以下特点：

特性	轮询	WebSocket
实时性	依赖轮询间隔（秒级）	毫秒级实时
服务端改造成本	无需改造	需支持 WS 协议
浏览器兼容性	全版本兼容	IE10+
资源消耗	高频请求可能造成压力	长连接低消耗
适用场景	低频更新（如状态查询）	高频实时（如聊天）

---

二、基础轮询实现方案

原生 JavaScript 示例

let pollingTimer = null;

function startPolling() {
  pollingTimer = setInterval(async () => {
    try {
      const res = await fetch('/api/data');
      const data = await res.json();
      console.log('Received:', data);
    } catch (err) {
      console.error('Polling failed:', err);
    }
  }, 5000);
}

function stopPolling() {
  clearInterval(pollingTimer);
}

存在的痛点

1. 内存泄漏风险：组件卸载时未清除定时器

2. 雪崩效应：网络抖动时请求堆积

3. 重试机制缺失：失败后直接中断

4. 条件控制困难：无法动态调整轮询策略

---

三、企业级轮询方案设计

1. 核心类设计

class EnhancedPoller {
  constructor(options) {
    // 初始化配置（完整参数校验建议加入）
    this.config = {
      requestFn: options.requestFn,
      onSuccess: options.onSuccess || (() => {}),
      onError: options.onError || (() => {}),
      interval: options.interval || 5000,
      retryLimit: options.retryLimit || 3,
      backoffFactor: options.backoffFactor || 2 // 退避系数
    };
    
    this.state = {
      isActive: false,
      retryCount: 0,
      currentInterval: this.config.interval,
      timer: null
    };
  }

  // 启动轮询
  start() {
    if (this.state.isActive) return;
    this.state.isActive = true;
    this._cycle();
  }

  // 执行轮询周期
  async _cycle() {
    try {
      const data = await this.config.requestFn();
      this._handleSuccess(data);
    } catch (err) {
      this._handleError(err);
    } finally {
      if (this.state.isActive) {
        this.state.timer = setTimeout(() => this._cycle(), this.state.currentInterval);
      }
    }
  }

  // 成功处理
  _handleSuccess(data) {
    this.state.retryCount = 0;
    this.state.currentInterval = this.config.interval;
    this.config.onSuccess(data);
  }

  // 错误处理（含指数退避）
  _handleError(err) {
    this.state.retryCount++;
    this.config.onError(err);

    if (this.state.retryCount > this.config.retryLimit) {
      this.stop();
      return;
    }

    this.state.currentInterval = 
      this.config.interval * Math.pow(this.config.backoffFactor, this.state.retryCount);
  }

  // 停止轮询
  stop() {
    this.state.isActive = false;
    clearTimeout(this.state.timer);
  }
}

2. 关键技术点

（1）指数退避重试机制
通过 backoffFactor 参数实现请求失败后的延迟递增，避免雪崩效应：

初始间隔：5s
第一次重试：5 * 2^1 = 10s
第二次重试：5 * 2^2 = 20s

（2）状态隔离

• 将运行状态（state）与配置（config）分离

• 避免多实例共享状态导致污染

（3）资源释放

• 提供明确的 stop() 方法

• 在框架生命周期钩子中自动清理

---

四、React/Vue 框架集成

React 示例（含 Hooks）

import { useEffect, useRef } from 'react';

function useSmartPolling(options) {
  const poller = useRef(null);

  useEffect(() => {
    poller.current = new EnhancedPoller({
      requestFn: options.requestFn,
      onSuccess: options.onSuccess,
      onError: options.onError,
      interval: 3000
    });
    
    poller.current.start();

    return () => {
      if (poller.current) poller.current.stop();
    };
  }, []);

  return {
    stop: () => poller.current?.stop(),
    restart: () => poller.current?.start()
  };
}

// 在组件中使用
function DataPanel() {
  const { stop } = useSmartPolling({
    requestFn: fetchData,
    onSuccess: (data) => updateChart(data)
  });

  return <button onClick={stop}>停止轮询</button>;
}

Vue 示例（Composition API）

import { onMounted, onUnmounted } from 'vue';

export function usePolling(options) {
  let poller = null;

  onMounted(() => {
    poller = new EnhancedPoller(options);
    poller.start();
  });

  onUnmounted(() => {
    if (poller) poller.stop();
  });

  return {
    stop: () => poller?.stop()
  };
}

// 在组件中使用
export default {
  setup() {
    const { stop } = usePolling({
      requestFn: fetchData,
      onSuccess: handleDataUpdate
    });

    return { stop };
  }
}

五、最佳实践指南

1. 性能优化

• 请求防抖：在连续快速操作时合并请求

• 条件请求：添加 If-Modified-Since 头减少数据传输

• 缓存策略：配合 localStorage 实现本地缓存

2. 异常监控

// 在错误处理中集成监控
_handleError(err) {
  logErrorToService({
    type: 'POLLING_ERROR',
    message: err.message,
    metadata: {
      retryCount: this.state.retryCount,
      currentInterval: this.state.currentInterval
    }
  });
  // ...原有逻辑
}

3. 动态策略调整

// 根据网络状态智能调节轮询频率
const updateIntervalBasedOnNetwork = () => {
  const connection = navigator.connection;
  if (connection) {
    if (connection.saveData || connection.effectiveType === '2g') {
      poller.config.interval = 10000;
    }
  }
};

六、替代方案对比

方案	适用场景	实现成本	实时性
短轮询	低频更新（>30s）	低	差
长轮询	中频更新（5-30s）	中	中
WebSocket	高频实时（<1s）	高	优
Server-Sent Events	服务端主动推送（兼容性要求低）	中	优