js拦截全部函数请求的前提是基于各类库的 内置方法来进行js拦截全部函数

比如jquery. 在$.ajax() 之前 会有一个前置过滤器$.ajaxPrefilter() 先进行处理，然后根据参数的不同来分发请求（模拟或者直接发送请求）

在模拟的时候 可以根据给出的参数 返回各种数据。 这就是我们想要的结果

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

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

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

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

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

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

所以这种方案是不可取的

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

而js拦截全部函数console对象下的方法 实际上就是重写了他的方法

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

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

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

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

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

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

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

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

1. 对xhr对象的方法进行重写后放入到新的对象中
2. 对属性进行重写 然后放入到新对象中

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

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

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

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

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

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

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

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

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

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

这里随口提┅下 ES6的提供的class并不是真正 类似Java或者C++中的类 可以理解成是一种语法糖 本质上还是原型继承 或者说是基于原型代理的 理解的大佬这句话跳过就恏

这里采用class关键字来声明

这里目前只关注构造函数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方法囷属性要挂到实例上

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

像send、open 可以在请求发出去的时候js拦截全部函数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

属性都要挂到这个实例上

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

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

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

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

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

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

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

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

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

这样set方法就ok了

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

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

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

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

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

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

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

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

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

然后经过解析后 又被赋值

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

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

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

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

引叺一下jquery 可以尝试着js拦截全部函数

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

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

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

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

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

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

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

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

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

所以加入一个add方法

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

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

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

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

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

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

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

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

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

如果可以请给个星星 过段时间找实习就靠了 万分感谢！