前言

前一段时间，项目在对 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 函数进行读取。

  • 对 方法 进行拦截操作，代码如下