Web 开发之 ajax-hook 拦截所有 XMLHttpRequest 请求

小渣渣

相关资源下载

需求：拦截所有 XMLHttpRequest 请求，当后端接口返回登录失效状态码的时候，直接跳转到登录界面，不再继续传递。项目中也可以用来请求添加统一签名、协议自动解析、接口调用统计等。

回顾：

jQuery 拦截处理 Ajax 返回结果
https://www.itsvse.com/thread-9570-1-1.html

虽然 jQuery 可以拦截 Ajax 请求，但是仅限于调用者使用 jQuery 中的 ajax 方法，无法拦截使用原生 XMLHttpRequest 请求，既然 jQuery 中的 ajax 请求底层也是对 XMLHttpRequest 的封装，我们其实拦截 XMLHttpRequest 即可。

ajax-hook是用于拦截浏览器 XMLHttpRequest 对象的轻量库，它可以在 XMLHttpRequest 对象发起请求之前、收到响应内容之后以及发生错误时获得处理权，通过它你可以提前对请求、响应以及错误进行一些预处理。Ajax-hook具有很好的兼容性，可以在任何支持ES5的浏览器上运行，因为它并不依赖 ES6 特性。

原理：ajax-hook 自定义 XMLHttpRequest 中的方法和属性，覆盖全局的XMLHttpRequest对象。对 XMLHttpRequest 对象包了一层代理。

开源地址：https://github.com/wendux/ajax-hook

CDN 地址：https://unpkg.com/ajax-hook@3.0.1/dist/ajaxhook.min.js

proxy 和 hook 对比

proxy() 和hook()都可以用于拦截全局XMLHttpRequest。它们的区别是：hook()的拦截粒度细，可以具体到XMLHttpRequest对象的某一方法、属性、回调，但是使用起来比较麻烦，很多时候，不仅业务逻辑需要散落在各个回调当中，而且还容易出错。而proxy()抽象度高，并且构建了请求上下文（请求信息config在各个回调中都可以直接获取），使用起来更简单、高效。

大多数情况下，我们建议使用proxy() 方法，除非proxy() 方法不能满足你的需求。

尝试添加 jQuery ajax 请求拦截、ajax-hook 中 proxy 拦截，代码如下：

登录可见。

尝试使用 jQuery 发送一个 get 请求，可以看到两者都能拦截到，如下图：



使用原生 XMLHttpRequest 发送请求，发现只有 ajax-hook 可以拦截到，如下图：

登录可见。

ajax-hook proxy 更多用法：

登录可见。

示例：https://github.com/wendux/ajax-hook/tree/master/examples

（完）

小渣渣

拦截 fetch() API 请求和响应：https://stackoverflow.com/questi ... onses-in-javascript