如何优雅地追踪页面中的网络请求状态（开始与结束）-js教程-PHP中文网

如何优雅地追踪页面中的网络请求状态（开始与结束）

浏览器原生不提供 window.requestsOpen 这类全局网络请求计数属性或 networkCallOpen/allNetworkCallsClosed 等内置事件，但可通过封装 fetch 并配合自定义事件与请求计数器，实现精准的全局加载态管理。

浏览器原生不提供 `window.requestsopen` 这类全局网络请求计数属性或 `networkcallopen`/`allnetworkcallsclosed` 等内置事件，但可通过封装 `fetch` 并配合自定义事件与请求计数器，实现精准的全局加载态管理。

在现代 Web 开发中，为用户提供清晰的加载反馈（如旋转图标、遮罩层）至关重要。但直接在每个 fetch 前后手动调用 showNetworkIcon() 和 hideNetworkIcon() 存在明显缺陷：并发请求下，后完成的请求可能被先完成的请求错误地“关闭”加载态，导致 UI 提前隐藏，造成体验断裂。

根本原因在于：浏览器 window 或 document 对象并未暴露任何原生属性（如 window.pendingRequestsCount）或标准事件（如 networkCallOpen）来反映当前活跃的网络请求数量。尽管 Service Worker 中可通过 FetchEvent 拦截请求，但在主窗口上下文中，我们只能依赖开发者主动管控。

✅ 正确解法是：封装 fetch，引入引用计数 + 自定义事件机制。以下是一个生产就绪的封装示例：

// 全局请求计数器（确保跨模块共享）
let pendingRequestCount = 0;

// 触发统一的开始/结束事件（推荐 dispatch 到 document，避免 window 事件冒泡限制）
function dispatchNetworkEvent(type, detail = {}) {
  document.dispatchEvent(new CustomEvent(`network:${type}`, { 
    detail: { ...detail, timestamp: Date.now() } 
  }));
}

// 安全的 fetch 封装
async function safeFetch(url, options = {}) {
  // ✅ 请求开始：计数器+1，触发事件
  pendingRequestCount++;
  if (pendingRequestCount === 1) {
    dispatchNetworkEvent('start', { url });
  }

  try {
    const response = await fetch(url, options);

    // ✅ 请求成功：仅当响应有效时才计入（可选：根据业务需求判断是否算“完成”）
    return response;
  } catch (error) {
    // ✅ 请求失败：仍视为一次完成的请求生命周期
    throw error;
  } finally {
    // ✅ 请求结束：计数器-1，仅当归零时触发 completed 事件
    pendingRequestCount = Math.max(0, pendingRequestCount - 1);
    if (pendingRequestCount === 0) {
      dispatchNetworkEvent('completed');
    }
  }
}

使用方式简洁一致：

阿里云AI平台

阿里云AI平台是一款面向企业和开发者的云端人工智能服务平台。

下载

// 任意位置发起请求，无需关心计数逻辑
await safeFetch('/api/users');
await safeFetch('/api/posts');

// 全局监听加载态变化
document.addEventListener('network:start', () => showNetworkIcon());
document.addEventListener('network:completed', () => hideNetworkIcon());

⚠️ 关键注意事项：