javascript - 如何拦截不同JS库发出的所有AJAX请求

Question

我正在构建一个具有不同 JS 库(AngularJS、OpenLayers 等)的 Web 应用程序，并且需要一种方法来拦截所有 AJAX 响应，以防记录的用户 session 过期(响应返回 401 Unauthorized 状态)，将他重定向到登录页面。

我知道 AngularJS 提供拦截器 来管理此类场景，但无法找到一种方法来实现对 OpenLayers 请求的此类注入(inject)。所以我选择了普通的 JS 方法。

Here我找到了这段代码...

(function(open) {

    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {

        this.addEventListener("readystatechange", function() {
            console.log(this.readyState); // this one I changed
        }, false);

        open.call(this, method, url, async, user, pass);
    };

})(XMLHttpRequest.prototype.open);

...我对其进行了调整，看起来它的行为符合预期(仅在上一个 Google Chrome 上对其进行了测试)。

因为它修改了 XMLHTTPRequest 的原型(prototype)，我想知道这会导致多危险，或者它是否会产生严重的性能问题。顺便说一下，是否有任何有效的替代方案？

更新:如何在请求发送前拦截

前面的技巧没问题。但是，如果在相同的场景中你想在发送请求之前注入(inject)一些 header 怎么办？执行以下操作:

(function(send) {

    XMLHttpRequest.prototype.send = function(data) {

        // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent
        if(accessToken) this.setRequestHeader('x-access-token', accessToken);

        send.call(this, data);
    };

})(XMLHttpRequest.prototype.send);

Answer 1

这种类型的函数 Hook 非常安全，并且出于其他原因经常在其他方法上进行。

而且，唯一的性能影响实际上只是每个 .open() 加上您自己执行的任何代码的一个额外函数调用，这在涉及网络调用时可能无关紧要。

---

在 IE 中，这不会捕获任何试图使用 ActiveXObject 控制方法执行 Ajax 的代码。编写良好的代码首先查找 XMLHttpRequest 对象并使用它(如果可用)并且自 IE 7 以来就可用。但是，可能有一些代码使用 ActiveXObject 方法，如果它可以通过更高版本的 IE 实现。

---

在现代浏览器中，还有其他方式发出 Ajax 调用，例如 fetch() interface因此，如果要 Hook 所有 Ajax 调用，您必须 Hook 的不仅仅是 XMLHttpRequest。