基于 ES6 的 Proxy ，100行代码实现一个 XMLHttpRequest 的拦截核心 ajax-proxy

前言

前一段时间，项目在对 WKWebview 进行适配时，接触到了公共能力组使用的 Ajax-hook 方案，因而便对它的怎么实现的很感兴趣，到网上查资料学习时，找到了做者 @wendux 的 Ajax-hook原理解析 这篇文章，当时边看脑子里就边想：“卧槽，这种骚操做怎么感受 Proxy 也能来一波！”。等看到这篇文章的评论区有个老哥 @银冰雪千载 也发出了同样的疑问时，会心一笑，说干就干，打开 VSCode 就是一顿操做。

关于 ES6 的 Proxy

这个东西其实也不新鲜了，不过因为不支持 IE ，且 Safari 10 才开始支持，用的时候一直当心翼翼的。一直在寻找一些最佳实践，此次应该也算是一次练手。对它不太熟的同窗能够看看 MDN上的Proxy 和 ECMAScript 6入门里的Proxy 。这次实现，用到了它的get、set以及 construct 方法。

关于 XMLHttpRequest

XMLHttpRequest 咱们并不陌生，虽然在诸如 axios 这类优秀的请求库帮助下，咱们渐渐不须要直接操做它了，可是对它的熟悉程度不该该停留在表层，在一些浏览器适配和前端监控以及埋点的时候，仍是要和它打交道的。在这里咱们须要明确一些点：

• 像 response、responseText、timeout这类的属性，姑且称之为 普通属性
• 对应的，像 onreadystatechange、onprogress、onload这类的属性，则称之为 事件属性
• 固然，还有一些 open、send、abort这类，称之为 方法
• 这里重点关注一个地方，有很大一部分属性并非 writable 的，以下图

因此咱们在拦截这些属性时，要作些特殊处理。

原理解析

这部分建议先看一下 API ，或者打开 API 放在旁边对照着看，效果更佳。

和 Ajax-hook 同样，整体是采用代理模式，下面上个整体的原理图：

首先，不管项目（浏览器端）采用什么请求方案，只要是最终用的是 built-in 对象 XMLHttpRequest ，都须要用

var xhr = new XMLHttpRequest()
复制代码

将其实例化，那么咱们就能够先拦截 XMLHttpRequest 对象的 new 操做，落实到代码就是用 Proxy 的 construct 方法。在拦截操做里，咱们就作简单的两件事：

• 实例化 built-in 对象 XMLHttpRequest
• 用 Proxy 继续拦截 built-in 对象 XMLHttpRequest 的实例

而后咱们在上面的第二步接着深刻，用 get 和 set 对实例进行拦截，下面咱们重点看下这两个方法里作的事情。

• get(target, p, receiver)

  • 对 普通属性 进行 get 拦截操做，代码以下

    

    上文有提到，有一部分属性不是 writable，因此遇到这些属性，咱们在以后的 set 操做里，会将其缓存进带有前缀 _的同名属性中，因此在 get 时，须要先判断这些 _ 前缀的属性是否存在进而进行读取，而 writable 属性则经过 getter 函数进行读取。

  • 对 方法 进行拦截操做，代码以下

    

    拦截方法时，先判断用户是否提供了拦截函数，有的话执行并将结果记为 result，而后判断 result 类型，若是是 true ，则终止方法。（这里我加了一个功能，若是返回的是其余 truthy 值如 object 或者 function，能够将 result 当作新的参数传入。）

• set(target, p, value, receiver)

  • 对 事件属性 进行拦截操做，代码以下

    

    很简单，也是用户是否提供了拦截函数，有的话先执行。

  • 对 普通属性 进行 set 拦截操做，代码以下

    

    和上面相似的拦截操做，这里须要注意一下 catch 里的代码，此处就是上文说的对不是 writable 的属性进行的特殊操做。

最后，只需将上述代码生成的 Proxy 对象实例 赋值给 全局的 buit-in 对象 XMLHttpRequest 就大功告成了。 至此，基本上就是全部的代码了，在这里总结一下：

ajax-proxy 使用 Proxy 先对 buit-in 对象 XMLHttpRequest 的 new 操做进行拦截，而后再建立一个 Proxy 实例，对 buit-in 对象 XMLHttpRequest 实例的 get 和 set进行拦截操做，最后将生成的 Proxy 对象实例 赋值给 全局的 buit-in 对象 XMLHttpRequest，Done！

最后

篇幅有限，有些细节没有讲清楚或者讲的不对的地方请指出，更多的用法以及代码请戳 →

GitHub: github.com/LazyDuke/aj…

repo 里还有对 XMLHttpRequest、JQuery的 Ajax 模块以及 axios 进行拦截的测试用例，以为有意思的点一下 Star 吧~

本文章容许免费转载，但请注明原做者及原文连接。