首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

window.fetch的事件侦听器

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

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

代码语言:javascript
复制
// 自定义 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 的自定义事件。最后,我们监听这个自定义事件,并在事件处理函数中处理请求的成功和失败情况。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券