js怎么监听所有的请求

原创

ithorizon 8个月前 (09-01) 阅读数 96 #Javascript

JavaScript 怎样监听所有请求

在Web开发中，有时需要监听页面所有的网络请求，以便于调试或是实现某些特定的功能。在JavaScript中，可以使用以下几个方法来实现这一目的。

1. 使用 Fetch API 的拦截器

Fetch API 提供了拦截请求的能力，但仅限于使用 fetch 发起的请求。


// 注册拦截器
window.fetch = (function(fetch) {
  return function(input, init) {
    // 在发送请求之前执行某些操作
    console.log('请求发起:', input, init);
    return fetch(input, init).then(response => {
      // 在收到响应之后执行某些操作
      console.log('收到响应:', response);
      return response;
    });
  };
})(window.fetch);

2. 使用 XMLHttpRequest 的监听器

对于使用 XMLHttpRequest 发起的请求，可以对其进行监听。


// 监听 XMLHttpRequest 的实例化
const originalXHR = window.XMLHttpRequest;
function patchedXHR() {
  const xhr = new originalXHR();
  const open = xhr.open;
  // 重写 open 方法来监听请求
  xhr.open = function() {
    console.log('请求发起:', arguments);
    open.apply(xhr, arguments);
  };
  return xhr;
}
window.XMLHttpRequest = patchedXHR;

3. 使用 MutationObserver 监听 DOM 变化

对于通过动态创建 script 标签等方法发出的请求，可以通过 MutationObserver 来监听 DOM 的变化。


const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      for (let node of mutation.addedNodes) {
        if (node.tagName === 'SCRIPT') {
          console.log('动态脚本创建:', node.src);
        }
      }
    }
  });
});
observer.observe(document.body, { childList: true, subtree: true });

4. 使用代理（Proxy）监听网络请求

在现代浏览器中，可以使用 Proxy 对象来拦截几乎所有的网络请求。


const { proxy, setHandler } = Proxy;
// 代理 window 对象
const windowProxy = new proxy(window, {
  get(target, prop, receiver) {
    if (prop === 'fetch') {
      return function() {
        console.log('fetch 请求:', arguments);
        return Reflect.apply(target[prop], target, arguments);
      };
    } else if (prop === 'XMLHttpRequest') {
      return function() {
        const xhr = new target[prop]();
        const originalOpen = xhr.open;
        xhr.open = function() {
          console.log('XMLHttpRequest 请求:', arguments);
          originalOpen.apply(xhr, arguments);
        };
        return xhr;
      };
    }
    return Reflect.get(target, prop, receiver);
  }
});
// 将代理对象赋值给全局 window
window = windowProxy;