如何在document上全局监听Fetch事件？替代jQuery Ajax加载条逻辑

这个问题我之前也碰到过！Fetch API确实不像jQuery的Ajax那样提供现成的全局事件钩子，不过我们可以通过两种实用的方式来实现你要的加载条逻辑：

方法1：封装自定义Fetch工具函数 #

最简单的思路是写一个封装函数，把加载条的显示/隐藏逻辑和请求流程绑定在一起，项目里所有请求都用这个封装后的函数发起：

const loading = document.getElementById('loading'); // 你的加载条元素

// 封装带加载条控制的Fetch函数
async function myFetch(url, options = {}) {
  // 请求发起前显示加载条
  loading.style.display = 'block';
  
  try {
    const response = await fetch(url, options);
    // 这里可以统一处理响应校验，比如判断response.ok
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    return response;
  } catch (error) {
    console.error('请求出错:', error);
    throw error; // 把错误抛出，让调用处可以自行处理
  } finally {
    // 不管成功/失败/取消，请求完成后都隐藏加载条
    loading.style.display = 'none';
  }
}

// 使用示例
myFetch('/api/get-data')
  .then(res => res.json())
  .then(data => console.log('获取到数据:', data))
  .catch(err => alert('加载失败，请重试'));

方法2：全局重写Fetch（猴子补丁） #

如果不想修改项目里已有的Fetch调用，可以通过重写window.fetch来全局拦截所有请求，这种方式对现有代码的侵入性最低：

const loading = document.getElementById('loading');
// 先保存原生的Fetch方法，避免被覆盖后无法调用
const originalFetch = window.fetch;

// 重写全局Fetch
window.fetch = async function(url, options) {
  // 显示加载条
  loading.style.display = 'block';
  
  try {
    const response = await originalFetch(url, options);
    return response;
  } catch (error) {
    console.error('请求异常:', error);
    throw error;
  } finally {
    // 请求结束后隐藏加载条
    loading.style.display = 'none';
  }
};

// 现在项目里所有原生fetch调用都会自动触发加载条
fetch('/api/user-info')
  .then(res => res.json())
  .then(user => console.log('用户信息:', user));

额外优化建议 #

如果你的页面存在多个并发请求，建议加一个请求计数器：

• 每次发起请求时计数器+1
• 请求完成时计数器-1
• 只有当计数器归0时才隐藏加载条
  这样能避免多个请求交替触发时，加载条频繁显示隐藏的问题。

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