window.fetch的事件侦听器

window.fetch 是一个用于发起网络请求的现代 JavaScript API

以下是如何为 window.fetch 添加事件侦听器的示例：

// 自定义 fetch 事件
class FetchEvent {
  constructor(fetchPromise) {
    this.fetchPromise = fetchPromise;
  }

  then(onFulfilled, onRejected) {
    return this.fetchPromise.then(onFulfilled, onRejected);
  }

  catch(onRejected) {
    return this.fetchPromise.catch(onRejected);
  }
}

// 为 window.fetch 添加事件侦听器
const originalFetch = window.fetch;
window.fetch = (input, init) => {
  const fetchPromise = originalFetch(input, init);

  // 创建一个新的 FetchEvent 实例
  const fetchEvent = new FetchEvent(fetchPromise);

  // 触发自定义事件
  window.dispatchEvent(new CustomEvent('fetch', { detail: fetchEvent }));

  // 返回原始 fetchPromise
  return fetchPromise;
};

// 监听 fetch 事件
window.addEventListener('fetch', (event) => {
  const fetchEvent = event.detail;

  fetchEvent.then((response) => {
    console.log('请求成功:', response);
  }).catch((error) => {
    console.error('请求失败:', error);
  });
});

在这个示例中，我们首先创建了一个 FetchEvent 类，用于封装 fetch 请求的 Promise。然后，我们重写了 window.fetch 函数，使其在发起请求时触发一个名为 fetch 的自定义事件。最后，我们监听这个自定义事件，并在事件处理函数中处理请求的成功和失败情况。