如何监听所有 fetch API 调用？

Question

我们可以修改XMLHttpRequest.prototype.open来劫持之前所有的Ajax请求。如果切换到新浏览器的 fetch API?

等同于什么

const originalRequestOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
  this.addEventListener('load', function() {
      // do something
  });
  originalRequestOpen.apply(this, arguments);
};

Answer 1

我不建议修改本机对象和函数（即使是您对 XMLHttpRequest.prototype.open 所做的那样）。但是您可以替换 fetch 函数本身。最后它只是一个函数。

(function(ns, fetch) {
  if (typeof fetch !== 'function') return;

  ns.fetch = function() {
    var out = fetch.apply(this, arguments);
    
    // side-effect
    out.then(({ ok }) => console.log('loaded', ok));

    return out;
  }

}(window, window.fetch))

fetch('https://jsonplaceholder.typicode.com/users')
fetch('https://jsonplaceholder.typicode.com/userz')

如何监听所有 fetch API 调用？

How to listen on all fetch API calls?

javascript

fetch-api