摘要

✨长文阅读约需十分钟

✨跟着走一遍需要一小时以上

✨约100行代码

前段时间打算写一个给手机端用的假冒控制台可以用来看console的输出这一块功能目前已经完成了

但是后来知道有一个腾讯团队的项目vConsole 参考了一下发现他的功能丰富了很多可以看Network面板等

虽然是阉割过的面板不过还是可以看到一些网络相关的重要信息

所以自己也想着加上这个Network面板功能

想实现这个功能呢想到过几种方案一种是封装一个ajax 但是这种不太现实要让别人都用自己封装的ajax 对于项目中途需要引入的情况十分不友好需要改动大量代码

所以这种方案是不可取的

之后选择的方案就像这里就像实现console面板一样拦截了console下面的方法

而拦截console对象下的方法实际上就是重写了他的方法

比如console.log 实际上就是log方法进行了重写在真正执行log前先做一些自己想做的事情

思路

这一块一开始想到的其实是XMLHrrpRequest对象有全局的勾子函数查阅了文档似乎没有发现相关的内容

后来搜索了一些别的实现方式大多数就是辣鸡站不知道从哪里爬来的内容也没什么有价值的东西

后来在github上找到了一个仓库(Ajax-hook)

这个库实现的是可以拦截全局的Ajax请求可以同同名方法或者属性作为勾子达到拦截的效果

部分内容参考了他的实现思想

实际上实现方式和自定义的console很像底层运行依然靠原生的xhr对象但是在上层做了代理重写了XMLHttpRequest对象

大体实现思路可以列成下面这几步

保留原生xhr对象
将XMLHttpRequest对象置为新的对象
对xhr对象的方法进行重写后放入到新的对象中
对属性进行重写然后放入到新对象中

重写方法做的主要就是在执行原生的方法前提供一个钩子来执行自定义的内容

重写属性主要是一些事件触发的属性比如onreadystatechange

同时还有别的坑点 xhr对象上很多属性是只读的(这一点也是通过Ajax-hook了解到的)

如果在钩子中对只读属性进行修改了那在往下走也是没有用的因为压根没有修改成功

不过既然大致思路有了那就尝试着实现一下吧

实现

实现之前先想一下怎么使用吧这样实现过程也会有一个大致的方向

先起个名字就叫他Any-XHR了

使用的时候通过new AnyXHR()来创建实例

可以在构造函数中来进行钩子的添加钩子有两种一种是before(执行前调用)的钩子一种是after(执行后调用)的钩子

就像这样构造函数接受两个参数都是对象第一个是调用前执行的钩子另一种是调用后

对象里面的key对应了原生xhr的方法和属性保持一致即可

	let anyxhr = new AnyXHR({
		send: function(...args) {
			console.log('before send');
		}
	}, {
		send: function(...args) {
			console.log('after send');
		}	
	});

构造函数

有了目标现在就来实现一下吧按照所想的我们要用new关键字来实例化一个对象就要用构造函数或者class关键字创建一个类

这里采用class关键字来声明

	class AnyXHR {

		constructor(hooks = {}, execedHooks = {}) {
			this.hooks = hooks;
			this.execedHooks = execedHooks;
		}
		
		init() {
			// 初始化操作...
		}
		
		overwrite(proxyXHR) {
			// 处理xhr对象下属性和方法的重写
		}
	}

这里目前只关注构造函数

构造函数接受的两个对象就是表示执行前的钩子和执行后的钩子对应的挂到实例的hooks和execedHooks属性上

按照刚才说的步骤要保留原生的xhr对象把这个步骤丢到构造函数中

然后做一些初始化操作初始化的时候要对xhr对象重写

	constructor(hooks = {}, execedHooks = {}) {
+		this.XHR = window.XMLHttpRequest;

		this.hooks = hooks;
		this.execedHooks = execedHooks;
		
+		this.init();
	}

init 方法

init里要做的就是对XMLHttpRequest进行重写一个xhr实例的每个方法和属性进行重写

这样在new XMLHttpRequest()的时候 new出来的就是我们自己重写的xhr实例了

	init() {
		
		window.XMLHttpRequest = function() {

		}
			
	}

像这样把XMLHttpRequest赋值为一个新的函数这样XMLHttpRequest就不是原来的那个了用户全局访问到的就是我们自己写的这个新的函数

接着就是去实现重写像open、onload、send这些原生xhr实例的方法和属性了

可是怎么重写呢现在是个空函数怎么让用户在new XMLHttpRequest后可以使用send、open方法呢

其实之前有提到了 重写方法做的主要就是在执行原生的方法前提供一个钩子来执行自定义的内容

既然要执行原生的方法那我们还是需要用到原生的xhr对象

就拿open来说

在用户new XMLHttpRequest的同时需要再new一个我们保留下来的原生的XMLHttpRequest对象

然后在自己重写的XMLHttpRequest实例上挂一个send方法他做的就是先执行自定义的内容完了之后去执行我们new出来的保留下来的XMLHttpRequest对象的实例下的open方法同时把参数传递过去即可

听起来有点绕可以画画图再细细品味一下

	init() {
+		let _this = this;		
		window.XMLHttpRequest = function() {
+ 		this._xhr = new _this.XHR();   // 在实例上挂一个保留的原生的xhr实例   

+			this.overwrite(this);
		}
			
	}

这样在用户new XMLHttpRequest的时候内部就创建一个保留下来的原生的XMLHttpRequest实例

比如当用户调用send方法的时候我们先执行自己想要做的事情然后再调用this._xhr.send 执行原生xhr实例的send方法就可以了是不是很简单

完了之后我们进入overwrite方法这个方法做的事情就是上一句所说的对每个方法和属性进行重写其实就是在执行之前和执行之后动点手脚而已

调用_this.overwrite的时候我们需要把this传递过去这里的this 指向的是new XMLHttpRequest后的实例

属性和方法都是要挂到实例上的供用户调用所以把this传递过去方便操作

这里在用新函数覆盖window.XMLHttpRequest的时候不可以使用箭头函数箭头函数不能当作构造函数来使用所以这里要用this保留的做法

overwrite 方法

要重写方法和属性要重写的就是send、open、responseText、onload、onreadystatechange等这些

那要一个一个实现吗... 肯定是不现实的

要重写的方法和属性我们可以通过便利一个原生的xhr实例来获取

原生的xhr实例已经保留在了覆盖后的XMLHttpRequest对象的实例的_xhr属性上

所以通过遍历_xhr这个原生的xhr实例就可以拿到需要所有要重写的方法和属性的key和value

	overwrite(proxyXHR) {
+		for (let key in proxyXHR._xhr) {

+		}
	}

这里的proxyXHR参数指向的是一个修改后的XMLHttpRequest实例

方法和属性要挂到实例上

现对proxyXHR下的_xhr属性进行遍历可以拿到他下面的所有可遍历的属性和方法

然后区分方法和属性做不同的处理即可

	overwrite(proxyXHR) {
		for (let key in proxyXHR._xhr) {
		
+			if (typeof proxyXHR._xhr[key] === 'function') {
+				this.overwriteMethod(key, proxyXHR);
+				continue;
+			}

+			this.overwriteAttributes(key, proxyXHR);

		}
	}

通过typeof来判断当前遍历到的是属性还是方法如果是方法则调用overwriteMethod 对这个方法进行改造重写

如果是属性则通过overwriteAttributes对这个属性进行改造重写

同时把遍历到的属性名和方法名以及修改后的XMLHttpRequest实例传递过去

那接下来就来实现一下这里两个方法

overwriteMethod

在类中添加这个方法

	class AnyXHR {
	
+		overwriteMethod(key, proxyXHR) {
			// 对方法进行重写
+		}	
	
	}

这个方法做的就是对原生的xhr实例下的方法进行重写处理

其实严格来说把这个操作称作重写是不严格的

就拿send方法来说并不会对原生的xhr实例下的send方法进行修改而写新写一个方法挂到自己实现的xhr实例上来代替原生的xhr实例来执行最终send的过程还是调用原生的send方法只是在调用前和调用后多做了两件别的事情

所以这里就是对每个方法做一个包装

	overwriteMethod(key, proxyXHR) {
+		let hooks = this.hooks;	
+		let execedHooks = this.execedHooks;
	
+		proxyXHR[key] = (...args) => {

+		}
	}

首先保留了hooks和execedHooks 等下会频繁用到

然后我们往新的xhr实例上挂上同名的方法比如原生的xhr有个send 遍历到send的时候这里进来的key就是send 所以就会往新的xhr实例上挂上一个send 来替代原生的send方法

当方法被调用的时候会拿到一堆参数参数是js引擎(或者说浏览器)丢过来的这里用剩余参数把他们都接住组成一个数组调用钩子的时候或者原生方法的时候可以再传递过去

那这里面具体做些什么操作呢

其实就三步

如果当前方法有对应的钩子则执行钩子
执行原生xhr实例中对应的方法
看看还有没有原生xhr实例对应的方法执行后需要执行的钩子如果有则执行

	overwriteMethod(key, proxyXHR) {
		let hooks = this.hooks;	
		let execedHooks = this.execedHooks;
	
		proxyXHR[key] = (...args) => {

+	      // 如果当前方法有对应的钩子 则执行钩子
+	      if (hooks[key] && (hooks[key].call(proxyXHR, args) === false)) {
+				return;
+	      }
	
+	      // 执行原生xhr实例中对应的方法
+	      const res = proxyXHR._xhr[key].apply(proxyXHR._xhr, args);
	
+	      // 看看还有没有原生xhr实例对应的方法执行后需要执行的钩子 如果有则执行
+	      execedHooks[key] && execedHooks[key].call(proxyXHR._xhr, res);
	
+	      return res;

		}
	}

首先第一步 hooks[key]就是判断当前的方法有没有对应的钩子函数

hooks对象里面保存的就是所有的钩子函数或者说需要拦截的方法是在我们执行new AnyXHR(..)的时候传进来的

如果有则执行并把参数传递给钩子如果这个钩子函数返回了false 则中止不往下走了这样可以起到拦截的效果

否则就往下走执行原生xhr实例中对应的方法

原生的xhr实例放在了_xhr这个属性里所以通过proxyXHR._xhr[key]就可以访问到同时把参数用apply拍散传递过去就好了同时接住返回值

完了之后走第三步

看看有没有执行完原生xhr方法后还要执行的钩子如果有则执行然后把返回值传递过去

之后返回原生xhr实例对应的方法执行后反过来的返回值就好了

到这了方法的代理、拦截就完成了可以去尝试一下了

记得注释一下 this.overwriteAttributes(key, proxyXHR); 这一行

第一次调试

虽然到现在代码不多不过一下子没绕过来还是很累的可以先倒杯水休息一下

到目前为止的完整代码如下

	class AnyXHR {

		constructor(hooks = {}, execedHooks = {}) {
			this.XHR = window.XMLHttpRequest;
	
			this.hooks = hooks;
			this.execedHooks = execedHooks;
			
			this.init();
		}
		
		init() {
			let _this = this;		
			window.XMLHttpRequest = function() {
	 			this._xhr = new _this.XHR();   // 在实例上挂一个保留的原生的xhr实例   
	
				_this.overwrite(this);
			}
		}
		
		overwrite(proxyXHR) {
			for (let key in proxyXHR._xhr) {
			
				if (typeof proxyXHR._xhr[key] === 'function') {
					this.overwriteMethod(key, proxyXHR);
					continue;
				}
	
				// this.overwriteAttributes(key, proxyXHR);
	
			}
		}
		
		overwriteMethod(key, proxyXHR) {
			let hooks = this.hooks;	
			let execedHooks = this.execedHooks;
		
			proxyXHR[key] = (...args) => {
	
		      // 如果当前方法有对应的钩子 则执行钩子
		      if (hooks[key] && (hooks[key].call(proxyXHR, args) === false)) {
					return;
		      }
		
		      // 执行原生xhr实例中对应的方法
		      const res = proxyXHR._xhr[key].apply(proxyXHR._xhr, args);
		
		      // 看看还有没有原生xhr实例对应的方法执行后需要执行的钩子 如果有则执行
		      execedHooks[key] && execedHooks[key].call(proxyXHR._xhr, res);
		
		      return res;
	
			}
		}
	}

尝试一下第一次调试

	new AnyXHR({
		open: function () {
			console.log(this);
		}
	});
	
	var xhr = new XMLHttpRequest();
	
	xhr.open('GET', '/abc?a=1&b=2', true);
	
	xhr.send();

可以打开控制台看看是否有输出同时可以观察一下对象和_xhr属性下内容坐下对比看看

overwriteAttributes 方法

这个方法实现稍微麻烦些内容也会绕一些

可能有一个想法为什么要监听或者说代理再或者说给属性提供钩子呢有什么用吗

像responseText这种属性其实不是目标

目标是给像onreadystatechange、onload这样的属性包装一层

这些属性有点类似事件或者说就是事件

使用的时候需要手动给他们赋值在对应的时刻会自动调用可以说是原生xhr提供的钩子

像send、open 可以在请求发出去的时候拦截

而onreadystatechange、onload 可以用来拦截服务的响应的请求

所以有必要对这些属性进行包装

知道了为什么需要对属性做个包装问题就到了怎么去包装属性了

那onload做例子

xhr.onload = function() {
	...
};

在用户这样赋值的时候我们应该做出一些响应

捕获到这个赋值的过程

然后去看看 hooks这个数组中有没有onload的钩子呀

如果有的话那就在执行原生的xhr实例的onload之前执行一下钩子就ok了

那问题来时普通的属性怎么办比如responseType

那这些属性就不处理了直接挂到新的xhr实例上去

又有问题了怎么区分普通的属性和事件一样的属性呢

其实观察一下就知道 on打头的属性就是事件一样的属性了

所以总结一下

看看属性是不是on打头
如果不是直接挂上去
如果是则看看有没有要执行的钩子
如果有则包装一下先执行钩子再执行本体
如果没有责直接赋值挂上去

逻辑理清楚了是不是发现很简单

好那就动手吧

？？等等怎么监听用户给onload这样的属性赋值啊？？？

可以停一下仔细想想

这一块就可以用到ES5中提供的 getter和setter方法

这个知识点肯定是很熟悉的不熟悉可以去翻一下MDN

通过这两个方法就可以监听到用户对一个属性赋值和取值的操作同时可以做一些额外的事情

那怎么给要插入的属性设置get/set方法呢

ES5提供了Object.defineProperty方法

可以给一个对象定义属性同时可以指定她的属性描述符属性描述符中可以描述一个属性是否可写是否可以枚举还有他的set/get等

当然使用字面量的方式为一个属性定义get/set方法也是可以的

扯了这么多那就实现一下这个方法吧

	overwriteAttributes(key, proxyXHR) {
		Object.defineProperty(proxyXHR, key, this.setProperyDescriptor(key, proxyXHR));
	}

这里就一行代码就是用Object.defineProperty给自己实现的xhr实例上挂个属性属性名就是传递过来的key 然后用setProperyDescriptor方法生成属性描述符同时把key和实例传递过去

描述符里面会生成get/set方法也就是这个属性赋值和取值时候的操作

setProperyDescriptor 方法

同样的往类里面加入这个方法

	setProperyDescriptor(key, proxyXHR) {
	
	}

可以拿到要添加的属性名(key)和自己实现的xhr对象实例

属性都要挂到这个实例上

	setProperyDescriptor(key, proxyXHR) {
+		let obj = Object.create(null);
+		let _this = this;
		
	}

属性描述符实际上是个对象

这里用Object.create(null)来生成一个绝对干净的对象防止有一些乱起八糟的属性出现阴差阳错变成描述

然后保留一下this

之后就实现一下set

	setProperyDescriptor(key, proxyXHR) {
		let obj = Object.create(null);
		let _this = this;
		
+		obj.set = function(val) {

+		}
	}

set方法会在属性被赋值的时候(比如obj.a = 1)被调用他会拿到一个参数就是赋值的值(等号右边的值)

然后在里面就可以做之前罗列的步骤了

看看属性是不是on打头
如果不是直接挂上去
如果是则看看有没有要执行的钩子
如果有则包装一下先执行钩子再执行本体
如果没有责直接赋值挂上去

	setProperyDescriptor(key, proxyXHR) {
		let obj = Object.create(null);
		let _this = this;
		
		obj.set = function(val) {

+			// 看看属性是不是on打头 如果不是 直接挂上去
+			if (!key.startsWith('on')) {
+				proxyXHR['__' + key] = val;
+				return;
+			}

+			// 如果是 则看看有没有要执行的钩子
+			if (_this.hooks[key]) {
				
+				// 如果有 则包装一下 先执行钩子 再执行本体
+				this._xhr[key] = function(...args) {
+					(_this.hooks[key].call(proxyXHR), val.apply(proxyXHR, args));
+				}
				
+				return;
+			}

+			// 如果没有 责直接赋值挂上去
+			this._xhr[key] = val;
		}
		
+		obj.get = function() {
+			return proxyXHR['__' + key] || this._xhr[key];
+		}
	
+		return obj;
	}

第一步的时候判断了是不是on打头不是则原模原样挂到实例上

然后去看看当前的这个属性在钩子的列表中有没有有的话就把要赋的值(val)和钩子一起打包变成一个函数

函数中先执行钩子再执行赋的值只要用的人不瞎鸡儿整那这里的值基本是函数没跑所以不判断直接调用同时参数传递过去

如果没有钩子呢则直接赋值就好了

这样set方法就ok了

get方法就简单一些了就是拿值而已

可能有一个地方不太能理解就是proxyXHR['__' + key] = val;

get方法中也有

为什么这里有个__前缀其实这样

考虑这么一个场景在拦截请求返回的时候可以拿到responseText属性

这个属性就是服务端返回的值

可能在这个时候会需要根据responseType统一的处理数据类型

如果是JSON 那就this.responseText = JSON.parse(this.response)

然后就满心欢喜的去成功的回调函数中拿responseText

结果在对他进行属性或者方法访问的时候报错了打印一下发现他还是字符串并没有转成功

其实就是因为responseText是只读的在这个属性的标签中 writable是false

所以可以用到一个代理属性来解决

比如this.responseText = JSON.parse(this.responseText)的时候

首先根据get方法去拿responseText 这个时候还没有__responseText属性所以回去原生的xhr实例拿拿到的就是服务端回来的值

然后经过解析后又被赋值

复制的时候在自己实现的xhr实例中就会多一个__responseText属性他的值是经过处理后的

那之后再通过responseText取值通过get方法拿到的就是__responseText的值

这样就通过一层属性的代理解决了原生xhr实例属性只读的问题

这样大部分逻辑都完成了记得把前面this.overwriteAttributes(key, proxyXHR);的注释去掉

第二次调试

到这里被绕晕是有可能的不用太在意仔细理一下画画图就好了倒杯水冷静一下

这是到目前为止的完整代码可以去尝试一下

class AnyXHR {

  constructor(hooks = {}, execedHooks = {}) {
    this.XHR = window.XMLHttpRequest;

    this.hooks = hooks;
    this.execedHooks = execedHooks;

    this.init();
  }

  init() {
    let _this = this;
    window.XMLHttpRequest = function () {
      this._xhr = new _this.XHR(); // 在实例上挂一个保留的原生的xhr实例   

      _this.overwrite(this);
    }
  }

  overwrite(proxyXHR) {
    for (let key in proxyXHR._xhr) {

      if (typeof proxyXHR._xhr[key] === 'function') {
        this.overwriteMethod(key, proxyXHR);
        continue;
      }

      this.overwriteAttributes(key, proxyXHR);

    }
  }

  overwriteMethod(key, proxyXHR) {
    let hooks = this.hooks;
    let execedHooks = this.execedHooks;

    proxyXHR[key] = (...args) => {

      // 如果当前方法有对应的钩子 则执行钩子
      if (hooks[key] && (hooks[key].call(proxyXHR, args) === false)) {
        return;
      }

      // 执行原生xhr实例中对应的方法
      const res = proxyXHR._xhr[key].apply(proxyXHR._xhr, args);

      // 看看还有没有原生xhr实例对应的方法执行后需要执行的钩子 如果有则执行
      execedHooks[key] && execedHooks[key].call(proxyXHR._xhr, res);

      return res;

    }
  }

  setProperyDescriptor(key, proxyXHR) {
    let obj = Object.create(null);
    let _this = this;

    obj.set = function (val) {

      // 看看属性是不是on打头 如果不是 直接挂上去
      if (!key.startsWith('on')) {
        proxyXHR['__' + key] = val;
        return;
      }

      // 如果是 则看看有没有要执行的钩子
      if (_this.hooks[key]) {

        // 如果有 则包装一下 先执行钩子 再执行本体
        this._xhr[key] = function (...args) {
          (_this.hooks[key].call(proxyXHR), val.apply(proxyXHR, args));
        }

        return;
      }

      // 如果没有 责直接赋值挂上去
      this._xhr[key] = val;
    }

    obj.get = function () {
      return proxyXHR['__' + key] || this._xhr[key];
    }

    return obj;
  }

  overwriteAttributes(key, proxyXHR) {
    Object.defineProperty(proxyXHR, key, this.setProperyDescriptor(key, proxyXHR));
  }
}

调用

new AnyXHR({
  open: function () {
    console.log('open');
  },
  onload: function () {
    console.log('onload');
  },
  onreadystatechange: function() {
    console.log('onreadystatechange');
  }
});


$.get('/aaa', {
  b: 2,
  c: 3
}).done(function (data) {
  console.log(1);
});

var xhr = new XMLHttpRequest();

xhr.open('GET', '/abc?a=1&b=2', true);

xhr.send();

xhr.onreadystatechange = function() {
  console.log(1);
}

引入一下jquery 可以尝试着拦截

观察一下控制台就能看到结果了

接下来还有一些内容需要完成让整个类更完善不过剩下的都是很简单的内容了

单例

因为是全局拦截而且全局下只有一个XMLHttpRequest对象所以这里应该设计成单例

单例是设计模式中的一种其实没那么玄乎就是全局下只有一个实例

也就是说得动点手脚怎么new AnyXHR拿到的都是同一个实例

修改一下构造函数

	constructor(hooks = {}, execedHooks = {}) {
		// 单例
+		if (AnyXHR.instance) {
+			return AnyXHR.instance;
+		}
		
		this.XHR = window.XMLHttpRequest;
		
		this.hooks = hooks;
		this.execedHooks = execedHooks;
		this.init();
	
+		AnyXHR.instance = this;
	}

进入构造函数先判断AnyXHR上有没有挂实例如果有则直接返回实例如果没有则进行创建

然后创建流程走完了之后把AnyXHR上挂个实例就好了这样不管怎么new 拿到的都是都是同一个实例

同时再加一个方法可以方便拿到实例

	getInstance() {
	  return AnyXHR.instance;
	}

动态加入钩子

所有的钩子都维护在两个对象内每一次方法的执行都会去读这两个对象所以只要让对象发生改变就能动态的加钩子

所以加入一个add方法

	add(key, value, execed = false) {
	  if (execed) {
	    this.execedHooks[key] = value;
	  } else {
	    this.hooks[key] = value;
	  }
	  return this;
	}

其中key value两个参数对应的就是属性名或者方法名和值

execed代表是不是原生的方法执行后再执行这个参数用来区分添加到哪个对象中

同样的道理去掉钩子和清空钩子就很简单了

去掉钩子

	rmHook(name, isExeced = false) {
	  let target = (isExeced ? this.execedHooks : this.hooks);
	  delete target[name];
	}

清空钩子

	clearHook() {
		this.hooks = {};
		this.execedHooks = {};
	}

取消全局的监听拦截

这一步其实很简单把我们自己实现的重写的XMLHttpRequest变成原来的就好了

原来的我们保留在了this.XHR上

	unset() {
		window.XMLHttpRequest = this.XHR;
	}

重新监听拦截

既然是单例重新开启监听那只要把单例清了重新new就好了

	reset() {
	  AnyXHR.instance = null;
	  AnyXHR.instance = new AnyXHR(this.hooks, this.execedHooks);
	}

完整代码

class AnyXHR {
/**
 * 构造函数
 * @param {*} hooks 
 * @param {*} execedHooks 
 */
  constructor(hooks = {}, execedHooks = {}) {
    // 单例
    if (AnyXHR.instance) {
      return AnyXHR.instance;
    }

    this.XHR = window.XMLHttpRequest;

    this.hooks = hooks;
    this.execedHooks = execedHooks;
    this.init();

    AnyXHR.instance = this;
  }

  /**
   * 初始化 重写xhr对象
   */
  init() {
    let _this = this;

    window.XMLHttpRequest = function() {
      this._xhr = new _this.XHR();

      _this.overwrite(this);
    }

  }

  /**
   * 添加勾子
   * @param {*} key 
   * @param {*} value 
   */
  add(key, value, execed = false) {
    if (execed) {
      this.execedHooks[key] = value;
    } else {
      this.hooks[key] = value;
    }
    return this;
  }

  /**
   * 处理重写
   * @param {*} xhr 
   */
  overwrite(proxyXHR) {
    for (let key in proxyXHR._xhr) {
      
      if (typeof proxyXHR._xhr[key] === 'function') {
        this.overwriteMethod(key, proxyXHR);
        continue;
      }

      this.overwriteAttributes(key, proxyXHR);
    }
  }

  /**
   * 重写方法
   * @param {*} key 
   */
  overwriteMethod(key, proxyXHR) {
    let hooks = this.hooks;
    let execedHooks = this.execedHooks;

    proxyXHR[key] = (...args) => {
      // 拦截
      if (hooks[key] && (hooks[key].call(proxyXHR, args) === false)) {
        return;
      }

      // 执行方法本体
      const res = proxyXHR._xhr[key].apply(proxyXHR._xhr, args);

      // 方法本体执行后的钩子
      execedHooks[key] && execedHooks[key].call(proxyXHR._xhr, res);

      return res;
    };
  }

  /**
   * 重写属性
   * @param {*} key 
   */
  overwriteAttributes(key, proxyXHR) {
    Object.defineProperty(proxyXHR, key, this.setProperyDescriptor(key, proxyXHR));
  }

  /**
   * 设置属性的属性描述
   * @param {*} key 
   */
  setProperyDescriptor(key, proxyXHR) {
    let obj = Object.create(null);
    let _this = this;

    obj.set = function(val) {

      // 如果不是on打头的属性
      if (!key.startsWith('on')) {
        proxyXHR['__' + key] = val;
        return;
      }

      if (_this.hooks[key]) {

        this._xhr[key] = function(...args) {
          (_this.hooks[key].call(proxyXHR), val.apply(proxyXHR, args));
        }

        return;
      }

      this._xhr[key] = val;
    }

    obj.get = function() {
      return proxyXHR['__' + key] || this._xhr[key];
    }

    return obj;
  }

  /**
   * 获取实例
   */
  getInstance() {
    return AnyXHR.instance;
  }

  /**
   * 删除钩子
   * @param {*} name 
   */
  rmHook(name, isExeced = false) {
    let target = (isExeced ? this.execedHooks : this.hooks);
    delete target[name];
  }

  /**
   * 清空钩子
   */
  clearHook() {
    this.hooks = {};
    this.execedHooks = {};
  }

  /**
   * 取消监听
   */
  unset() {
    window.XMLHttpRequest = this.XHR;
  }

  /**
   * 重新监听
   */
  reset() {
    AnyXHR.instance = null;
    AnyXHR.instance = new AnyXHR(this.hooks, this.execedHooks);
  }
}

完成

到此呢整体就完成了由于缺乏测试指不定还有bug

另外有些缺陷就是所有钩子得是同步的如果是异步顺序会乱这个问题之后再解决如果感兴趣可以自己也尝试一下

另外这种拦截的方式基本上适用任何对象可以灵活的使用

源码

只要是使用XMLHttpRequest的ajax请求都可以用他来拦截