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

LazyDuke

前言

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

关于 ES6 的 Proxy

这个东西其实也不新鲜了,不过由于不支持 IE ,且 Safari 10 才开始支持,用的时候一直小心翼翼的。一直在寻找一些最佳实践,这次应该也算是一次练手。对它不太熟的同学可以看看 MDN上的ProxyECMAScript 6入门里的Proxy 。此次实现,用到了它的getset以及 construct 方法。

关于 XMLHttpRequest

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

  • responseresponseTexttimeout这类的属性,姑且称之为 普通属性
  • 对应的,像 onreadystatechangeonprogressonload这类的属性,则称之为 事件属性
  • 当然,还有一些 opensendabort这类,称之为 方法
  • 这里重点关注一个地方,有很大一部分属性并不是 writable 的,如下图

8E62C51B-6350-4E14-B715-0E9ECF36CD3C.jpg

所以我们在拦截这些属性时,要做些特殊处理

原理解析

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

Ajax-hook 一样,总体是采用代理模式,下面上个总体的原理图:

ajax-proxy.jpg

首先,无论项目(浏览器端)采用什么请求方案,只要是最终用的是Host Object(宿主对象)里的XMLHttpRequest,都需要用

var xhr = new XMLHttpRequest()

将其实例化,那么我们就可以先拦截 XMLHttpRequest 对象的 new 操作,落实到代码就是用 Proxyconstruct 方法。在拦截操作里,我们就做简单的两件事:

  • 实例化 XMLHttpRequest
  • Proxy 继续拦截 XMLHttpRequest 的实例

carbon.png

然后我们在上面的第二步接着深入,用 getset 对实例进行拦截,下面我们重点看下这两个方法里做的事情。

get(target, p, receiver)

  • 普通属性进行get拦截操作,代码如下carbon的副本.png 上文有提到,有一部分属性不是 writable,所以遇到这些属性,我们在之后的 set 操作里,会将其缓存进带有前缀 _的同名属性中,所以在 get 时,需要先判断这些 _ 前缀的属性是否存在进而进行读取,而 writable 属性则通过 getter 函数进行读取。
  • 方法进行拦截操作,代码如下carbon的副本2.png拦截方法时,先判断用户是否提供了拦截函数,有的话执行并将结果记为 result,然后判断 result 类型,如果是 true ,则终止方法。(这里我加了一个功能,如果返回的是其他 truthy 值如 object 或者 function,可以将 result 当做新的参数传入。)

set(target, p, value, receiver)

  • 事件属性进行拦截操作,代码如下carbon的副本3.png很简单,也是用户是否提供了拦截函数,有的话先执行。
  • 普通属性进行 set 拦截操作,代码如下carbon的副本4.png 和上面类似的拦截操作,这里需要注意一下catch里的代码,此处就是上文说的对不是writable的属性进行的特殊操作。

最后,只需将上述代码生成的 Proxy 对象实例 赋值给宿主对象 XMLHttpRequest 就大功告成了。 至此,基本上就是所有的代码了,在这里总结一下:

ajax-proxy 使用 Proxy 先对宿主对象 XMLHttpRequestnew 操作进行拦截,然后再创建一个 Proxy 实例,对 XMLHttpRequest 实例的 getset进行拦截操作,最后将生成的 Proxy 对象实例 赋值给宿主对象 XMLHttpRequest,Done!

最后

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

GitHub: github.com/LazyDuke/aj…

repo 里还有对 XMLHttpRequestJQueryAjax 模块以及 axios 进行拦截的测试用例,觉得有意思的点一下 Star 吧~

本文章允许免费转载,但请注明原作者及原文链接。

阅读 1.4k

前端的尤里卡时刻
一些基础巩固 一些原理解析 一些最佳实践 一些踩坑经历
113 声望
5 粉丝
0 条评论
你知道吗?

113 声望
5 粉丝
文章目录
宣传栏