如何监听所有 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函数itselt。最后它只是一个函数。

(function(ns, fetch){
	if(typeof fetch !== 'function') return;
  
  ns.fetch = function() {
  	var out = fetch.apply(this, arguments);
    out.then(({ok}) => console.log('loaded', ok) )
    
    return out;
  }
  
}(window, window.fetch))

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