如何统一管理页面中的网络请求状态并避免图标误隐藏-js教程-PHP中文网

如何统一管理页面中的网络请求状态并避免图标误隐藏

浏览器原生不提供 window.requestsOpen 这类全局网络请求计数属性或 networkCallOpen/Closed 标准事件，需通过封装 fetch 并结合自定义事件与请求计数器实现准确的加载状态控制。

浏览器原生不提供 `window.requestsopen` 这类全局网络请求计数属性或 `networkcallopen/closed` 标准事件，需通过封装 `fetch` 并结合自定义事件与请求计数器实现准确的加载状态控制。

在前端开发中，为提升用户体验，常需在页面显示“加载中”图标（如旋转 spinner）来反馈网络请求状态。但直接在每个 fetch 前后手动调用 showNetworkIcon() 和 hideNetworkIcon() 存在明显缺陷：并发请求下，后完成的请求可能被先完成的请求错误地关闭图标，导致视觉状态与实际网络活动不一致。

根本原因在于——浏览器 window 或 document 对象并未暴露任何原生属性（如 window.requestsOpen）或标准事件（如 "networkCallOpen"）来反映当前活跃的网络请求数量或生命周期。虽然 Service Worker 中可通过 FetchEvent 拦截请求，但在主页面上下文中，唯一可原生利用的底层机制是 AbortSignal（用于中止请求），而非状态监听。

✅ 正确解法：封装 fetch，维护全局请求计数器，并触发语义化自定义事件。

以下是一个生产可用的封装示例，支持并发安全、URL 透传与错误兜底：

// 全局请求计数器（确保跨模块一致性）
let activeRequestCount = 0;

// 封装 fetch，自动管理加载状态
function networkFetch(url, options = {}) {
  // 1. 请求开始：计数器+1，派发 open 事件
  activeRequestCount++;
  if (activeRequestCount === 1) {
    window.dispatchEvent(new CustomEvent('networkCallOpen', { detail: { url } }));
  }

  // 2. 执行请求
  return fetch(url, options)
    .then(response => {
      // 3. 请求结束：计数器-1
      activeRequestCount = Math.max(0, activeRequestCount - 1);

      // 4. 仅当所有请求都完成时，才派发 closed 事件
      if (activeRequestCount === 0) {
        window.dispatchEvent(new CustomEvent('networkCallClosed', { detail: { url } }));
      }
      return response;
    })
    .catch(error => {
      // 5. 异常情况同样需减计数并触发 closed（避免状态卡死）
      activeRequestCount = Math.max(0, activeRequestCount - 1);
      if (activeRequestCount === 0) {
        window.dispatchEvent(new CustomEvent('networkCallClosed', { detail: { url, error } }));
      }
      throw error;
    });
}

// 使用示例（完全透明，无需修改业务逻辑）
async function loadData() {
  try {
    const res = await networkFetch('/api/users');
    return await res.json();
  } catch (err) {
    console.error('请求失败:', err);
  }
}

? 关键设计说明：

✅ 计数器驱动：activeRequestCount 是核心状态，保证多请求并发时图标只在 最后一个 请求结束时隐藏；
✅ 事件语义清晰：networkCallOpen 在首个请求发起时触发（非每次）；networkCallClosed 在 全部请求完成 时触发（即“all calls closed”）；
✅ 异常安全：catch 中同步降级计数器，防止因未捕获错误导致加载图标永久显示；
✅ 零侵入集成：业务代码只需将 fetch 替换为 networkFetch，其余逻辑（await、.json() 等）保持不变。

⚠️ 注意事项：

避免在多个独立模块中重复定义 activeRequestCount —— 应作为单例状态（推荐通过 ES Module 导出或使用 window.__networkCounter 全局暂存）；
若项目已使用 Axios 等库，应在其 interceptors.request 和 interceptors.response 中实现相同计数逻辑；
不要依赖 XMLHttpRequest 的 onloadstart/onloadend，因其不覆盖 fetch，且事件粒度粗（无法区分成功/失败）。