如何拦截含get-users的成功XMLHttpRequest并触发自定义函数

关于send和send.call的用法 #

你现在的写法完全正确：用立即执行函数保存原生的send方法，重写XMLHttpRequest.prototype.send时，通过send.call(this, data)调用原方法，既能保证请求正常发送，又能保留当前XHR实例的this指向，不会破坏原生请求逻辑，放心用就行。

筛选请求的核心问题 #

状态码是请求返回响应后才会有的值，不能在send阶段直接判断，得等请求完成后在响应事件里检查。下面是满足你需求的完整实现：

(function (originalSend) {
  XMLHttpRequest.prototype.send = function (data) {
    // 先检查前置条件：URL包含get-users，可选条件请求方法为GET（转大写兼容大小写差异）
    const urlMatches = this.url.includes('get-users');
    const methodMatches = this.method.toUpperCase() === 'GET'; // 可选条件，不需要可以删掉

    if (urlMatches && methodMatches) { // 如果不需要method条件，只留urlMatches即可
      // 绑定load事件，请求完成且响应可用时触发
      this.addEventListener('load', () => {
        // 检查状态码是否为200
        if (this.status === 200) {
          // 触发你的自定义函数
          MyFunction();
        }
      });
    }

    // 调用原生send方法，保证请求正常发送
    originalSend.call(this, data);
  };
})(XMLHttpRequest.prototype.send);

代码说明 #

• 前置条件（URL、请求方法）在send阶段判断，因为此时请求的URL和方法已经确定
• 状态码判断放在load事件里，这时候响应已经返回，能拿到正确的status值
• 如果不需要请求方法的筛选，直接把methodMatches相关的判断删掉就行
• 如果你担心同一个XHR实例重复绑定事件，可以给addEventListener加第三个参数{ once: true }，保证事件只触发一次

内容的提问来源于stack exchange，提问作者RooksStrife