javascript - 如何监听所有的 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

我不建议修改 native 对象和函数(即使是您使用 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')