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

前言

前一段时间,项目在对 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 吧~

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


前端的尤里卡时刻
一些基础巩固 一些原理解析 一些最佳实践 一些踩坑经历
113 声望
5 粉丝
0 条评论
推荐阅读
关于用设计模式刷 LeetCode 这件事
最近在过 《剑指Offer》 这本书上的题,尽量把每题的多种解法都自己捋一遍,在过到 面试题20. 表示数值的字符串 这一题的时候,Discuss 里有一个同学提出了 职责链模式 的解法,让人眼前一亮,另一方面是笔者最近...

LazyDuke3阅读 938

再也不学AJAX了!(三)跨域获取资源 ① - 同源策略
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第四篇,最近更新于 2023 年 1...

libinfs19阅读 4k评论 4

封面图
再也不学 AJAX 了!(一)AJAX 概述
跨域获取数据:介绍了与「跨域发送 AJAX 请求」相关的一些内容:例如「同源策略」与四种跨域请求资源的方式:JSONP,CORS,postMessage 和 WebSocket;

libinfs19阅读 3.9k评论 6

封面图
JS 函数式概念: 管道 和 组合
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智7阅读 644

Vue3 + Vite2 + TypeScript + Pinia(Vuex)+JSX 搭建企业级开发脚手架【开箱即用】
随着Vue3的普及,已经有越来越多的项目开始使用Vue3。为了快速进入开发状态,在这里向大家推荐一套开箱即用的企业级开发脚手架,框架使用:Vue3 + Vite2 + TypeScript + JSX + Pinia(Vuex) + Antd。废话不多话,...

阳晨@11阅读 3.1k

封面图
快速构建页面结构的 3D Visualization
可以通过 控制台 --> 右边的三个小点 --> More Tools --> Layers 打开。即可以看到页面的一个 3D 层级关系,像是这样:

chokcoco6阅读 1.6k

前端性能优化到底该怎么做(上)— 开门见山
前端性能优化 又是个听起来很高大上的词,确实是的,因为它需要 高在性能,大在范围,所幸很多大佬都已经输出了很多高质量的内容供大家参考,作者最近也在学习和了解这方面的内容,对如下文中的一些理解若有不当...

熊的猫10阅读 2.1k

封面图
113 声望
5 粉丝
宣传栏