React：全局检测DOM请求状态并控制loading spinner的可行性问询

这种不想在每个组件里重复写loading spinner的诉求非常合理，其实有不少成熟的通用方案能帮你实现「全局检测请求状态，自动控制加载动画」的效果，下面分享几种实用思路：

一、全局拦截HTTP请求（最通用的方案） #

核心思路是重写项目里的请求方法（比如fetch、axios），维护一个全局的请求计数器：每次请求发起时计数器+1，请求完成（成功/失败）时计数器-1，根据计数器是否大于0来显示/隐藏全局的loading spinner。

示例：重写原生fetch #

// 初始化全局请求计数器
let activeRequestCount = 0;
// 获取全局loading元素（提前在页面里写好这个DOM）
const globalLoading = document.getElementById('global-loading-spinner');

// 保存原生fetch方法
const originalFetch = window.fetch;
// 重写fetch
window.fetch = async (...args) => {
  // 请求开始：计数器+1，显示loading
  activeRequestCount++;
  globalLoading.style.display = 'flex';

  try {
    // 执行原生请求逻辑
    const response = await originalFetch(...args);
    return response;
  } catch (err) {
    // 捕获错误，避免计数器卡住
    throw err;
  } finally {
    // 请求结束：计数器-1，若计数器归0则隐藏loading
    activeRequestCount--;
    if (activeRequestCount === 0) {
      globalLoading.style.display = 'none';
    }
  }
};

如果用axios的话更简单，直接用它的拦截器：

import axios from 'axios';

let activeRequestCount = 0;
const globalLoading = document.getElementById('global-loading-spinner');

// 请求拦截器
axios.interceptors.request.use(config => {
  activeRequestCount++;
  globalLoading.style.display = 'flex';
  return config;
});

// 响应拦截器（成功/失败都要处理）
axios.interceptors.response.use(
  response => {
    activeRequestCount--;
    if (activeRequestCount === 0) {
      globalLoading.style.display = 'none';
    }
    return response;
  },
  error => {
    activeRequestCount--;
    if (activeRequestCount === 0) {
      globalLoading.style.display = 'none';
    }
    return Promise.reject(error);
  }
);

二、结合前端框架的全局状态管理（框架场景更优雅） #

如果你用React、Vue这类框架，可以借助全局状态管理工具（比如React Context、Vue Pinia）封装带loading状态的请求方法，组件只需要订阅全局loading状态即可。

示例：React + Context #

// src/contexts/LoadingContext.js
import { createContext, useContext, useState } from 'react';

const LoadingContext = createContext();

export function LoadingProvider({ children }) {
  const [isGlobalLoading, setIsGlobalLoading] = useState(false);
  let activeRequestCount = 0;

  // 封装带loading管理的fetch方法
  const fetchWithLoading = async (url, options = {}) => {
    // 支持跳过全局loading的配置
    if (!options.skipLoading) {
      activeRequestCount++;
      setIsGlobalLoading(true);
    }

    try {
      const res = await fetch(url, options);
      return res;
    } catch (err) {
      throw err;
    } finally {
      if (!options.skipLoading) {
        activeRequestCount--;
        if (activeRequestCount === 0) {
          setIsGlobalLoading(false);
        }
      }
    }
  };

  return (
    <LoadingContext.Provider value={{ isGlobalLoading, fetchWithLoading }}>
      {children}
    </LoadingContext.Provider>
  );
}

// 自定义hooks，方便组件使用
export function useLoading() {
  return useContext(LoadingContext);
}

然后在根组件包裹LoadingProvider，其他组件里就可以直接用：

// 某个业务组件
import { useLoading } from './contexts/LoadingContext';

function UserList() {
  const { isGlobalLoading, fetchWithLoading } = useLoading();

  const fetchUsers = async () => {
    const res = await fetchWithLoading('/api/users');
    // ...处理数据
  };

  return (
    <div>
      {/* 这里不用单独写loading，全局的会自动显示 */}
      <button onClick={fetchUsers}>获取用户列表</button>
    </div>
  );
}

注意事项 #

• 可以给请求方法加skipLoading参数，让某些不需要全局loading的请求跳过（比如埋点请求）
• 要处理请求失败的情况，避免计数器卡住导致loading一直显示
• 全局loading的样式可以做的友好些（比如半透明遮罩+ spinner，避免用户误操作）

内容的提问来源于stack exchange，提问作者user12067722