Angular 4中如何检测网络连接？API项目断网告警方案咨询

Hey there! 针对你提到的API项目在断网/无法连接WebService时显示告警的需求，我结合实际项目经验整理了几个核心实现思路，应该能帮到你：

首先可以利用浏览器原生的在线/离线事件，快速捕获设备的网络连接状态变化，这是最基础的一层检测：

// 监听离线事件，触发告警
window.addEventListener('offline', () => {
  showNetworkAlert('网络已断开，请检查你的网络连接状态');
});

// 监听在线事件，网络恢复时自动隐藏告警
window.addEventListener('online', () => {
  hideNetworkAlert();
});

不过要注意，这个方法只能检测设备是否连上网，没法区分“能上网但API服务挂了”的情况，所以必须结合下面的请求层面处理。

大部分时候，用户遇到的是“网络通但无法连接WebService”的情况，这时候需要在API请求的统一封装里做错误拦截：

1. 用Axios的拦截器统一处理（推荐） #

如果你的项目用Axios，可以全局配置响应拦截器，捕获网络错误或服务不可达的情况：

import axios from 'axios';

// 响应拦截器
axios.interceptors.response.use(
  response => response, // 请求成功时直接返回
  error => {
    // 判断是否是网络错误、超时或服务不可达
    if (!error.response || error.code === 'ECONNABORTED' || error.message.includes('Network Error')) {
      showNetworkAlert('无法连接到服务，请稍后重试');
    }
    // 其他HTTP错误（比如404、500）可以单独处理
    return Promise.reject(error);
  }
);

// 还可以配置请求超时，避免用户无限等待
axios.defaults.timeout = 10000; // 10秒超时

2. 原生Fetch的错误捕获 #

如果用原生Fetch，要在catch块里判断错误类型：

async function fetchApiData(url) {
  try {
    const response = await fetch(url, { signal: AbortSignal.timeout(10000) });
    if (!response.ok) {
      // 处理服务端返回的错误码，比如503服务不可用
      if (response.status === 503) {
        showNetworkAlert('服务暂时维护中，请稍后再试');
      }
      throw new Error(`请求失败：${response.status}`);
    }
    return await response.json();
  } catch (error) {
    // 捕获网络连接失败的情况
    if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
      showNetworkAlert('网络连接异常，无法获取数据');
    }
    console.error('请求错误:', error);
  }
}

告警不能随便弹，要兼顾醒目和不打扰用户：

• 固定定位的告警横幅：用CSS做一个顶部/底部固定的横幅，不会遮挡核心内容：

.network-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #dc3545;
  color: #fff;
  padding: 12px;
  text-align: center;
  z-index: 9999; /* 确保在最上层 */
}

• 避免重复告警：加个状态变量控制告警是否已经显示，防止同一错误多次触发弹窗：

let isAlertVisible = false;

function showNetworkAlert(message) {
  if (isAlertVisible) return;
  isAlertVisible = true;
  
  const alertEl = document.createElement('div');
  alertEl.className = 'network-alert';
  alertEl.textContent = message;
  // 可以加个关闭按钮
  alertEl.innerHTML += '<button style="margin-left:10px; padding:4px 8px;" onclick="hideNetworkAlert()">关闭</button>';
  document.body.appendChild(alertEl);
}

function hideNetworkAlert() {
  const alertEl = document.querySelector('.network-alert');
  if (alertEl) {
    alertEl.remove();
    isAlertVisible = false;
  }
}

• 可选：自动重试或手动重试：在告警里加个“重试”按钮，让用户可以主动触发请求重试，或者设置自动重试机制（比如每隔5秒重试一次，成功后自动隐藏告警）。

• 区分错误类型，给出精准提示：别一概而论说“网络错误”，断网就提示“检查网络连接”，服务不可达就提示“服务暂时无法访问”，用户能更清楚问题出在哪。
• 移动端适配：移动端网络波动大，可以用navigator.connection API检测网络类型（比如2G/3G），提前给用户提示“当前网络较慢，加载可能延迟”。
• 错误日志记录：把这些网络错误、服务不可达的情况记录下来（比如存在localStorage或者上报到后台），方便后续排查问题，统计故障频率。

这些方法在我之前的几个API驱动的项目里都用过，效果还不错。你可以根据自己的项目技术栈（React/Vue/原生JS）调整具体实现，核心就是前端监听+请求拦截+友好提示这三点~

内容的提问来源于stack exchange，提问作者A. B