用Ajax配合定时器做心跳检测，核心是定期发GET请求验证后端可达性与接口响应正常性，需控制频率、防请求堆积、设超时、分类失败并同步状态。

用 Ajax 配合定时器做心跳检测，核心是定期发请求验证后端是否可达、接口是否响应正常，而不是单纯判断浏览器联网状态。关键在于控制频率、处理超时、识别真实失败，并避免堆积请求。

用 fetch + setInterval 实现基础心跳

每次定时触发一个轻量 GET 请求（如 /api/health），检查响应状态和可解析性：

let heartbeatTimer = null;

function startHeartbeat() {
  heartbeatTimer = setInterval(async () => {
    try {
      const res = await fetch('/api/health', {
        method: 'GET',
        cache: 'no-cache',
        headers: { 'X-Heartbeat': 'true' }
      });

      if (res.ok && res.headers.get('content-type')?.includes('application/json')) {
        console.log('✅ 心跳正常');
      } else {
        console.warn('⚠️ 接口返回异常状态或非 JSON');
        handleHeartbeatFail();
      }
    } catch (err) {
      console.error('❌ 心跳请求失败:', err.message);
      handleHeartbeatFail();
    }
  }, 5000); // 每 5 秒一次
}

function stopHeartbeat() {
  if (heartbeatTimer) {
    clearInterval(heartbeatTimer);
    heartbeatTimer = null;
  }
}

防止请求堆积与超时控制

网络慢或后端卡顿时，setInterval 可能连续触发未完成的请求。改用 setTimeout 链式调用，确保上一次完成后再发起下一次：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

let isChecking = false;

async function heartbeatOnce() {
  if (isChecking) return;
  isChecking = true;

  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 3000); // 3秒超时

    const res = await fetch('/api/health', {
      signal: controller.signal,
      cache: 'no-cache'
    });
    clearTimeout(timeoutId);

    if (!res.ok) throw new Error(`HTTP ${res.status}`);

    const json = await res.json();
    if (json.status !== 'up') throw new Error('服务未就绪');

    console.log('✅ 心跳成功');
  } catch (err) {
    console.error('❌ 心跳异常:', err.message);
    handleHeartbeatFail();
  } finally {
    isChecking = false;
  }
}

function startHeartbeat() {
  const tick = () => {
    heartbeatOnce().then(() => setTimeout(tick, 5000));
  };
  tick();
}

区分失败类型并做出响应

心跳失败不等于断网，需分类处理：

立即学习“Java免费学习笔记（深入）”；

• 网络层失败（如 TypeError: Failed to fetch）→ 可能断网或跨域/证书问题
• HTTP 错误（如 502、503）→ 后端故障，可降级或提示“服务暂不可用”
• 业务异常（如返回 {status:"down"}）→ 服务主动下线，前端可暂停功能
• 超时 → 网络延迟高或后端响应慢，可临时延长间隔或重试一次

配合前端状态管理

把心跳结果同步到全局状态，供其他模块感知：

// 示例：简单状态对象
const connectionState = {
  isOnline: true,
  lastSuccess: Date.now(),
  failureCount: 0,

  setOnline() {
    this.isOnline = true;
    this.failureCount = 0;
    this.lastSuccess = Date.now();
  },

  setOffline() {
    this.isOnline = false;
    this.failureCount++;
  }
};

function handleHeartbeatFail() {
  connectionState.setOffline();

  if (connectionState.failureCount >= 3) {
    console.warn('连续 3 次心跳失败，标记为离线');
    // 触发 UI 提示、关闭实时功能等
  }
}