javascript - 拦截XHR请求，javascript React

Question

我一直在尝试重写这些方法以拦截 xhr 请求，但似乎我所做的一切都只为 this.readyState 打印“1”。有谁知道为什么吗？

    addInterceptorsToXHRRequests() {
    const originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        const originalStateChangeHandler = this.onreadystatechange;
        this.onreadystatechange = function() {
            console.log(' ---> ',this.readyState);
            if (originalStateChangeHandler instanceof Function) {
                originalStateChangeHandler.apply(this, arguments);
                console.log('Ready state: ' + this.readyState);
            }
        };
        return originalOpen.apply(this, arguments);
    };
}

我在 componentDidMount 生命周期方法的末尾从 index.js 调用此函数。 (相当大的工程)

Answer 1

发生这种情况是因为您在 XMLHttpRequest.prototype.open 上绑定(bind)了一个函数。

open 仅返回状态 1。因此，您需要将 onreadystatechange 函数附加到完整的 xhr 中。

示例

// you probably want the original XMLHttpRequest here...
const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
   console.log(xhr.readyState);
};