XMLHttpRequest拦截请求和响应-Toy模板网

这篇具有很好参考价值的文章主要介绍了XMLHttpRequest拦截请求和响应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

环境： angular
实现： 拦截请求向请求信息增加字段
拦截响应过滤返回值
响应拦截：
根据angular使用的XMLHttpRequest 将对原本的请求转移到另一个将监听返回事件挂载到另一个世纪发送请求的xml上
使用get set 将客户端获取的responseText和response按照自己的意愿返回实现响应拦截

请求拦截
比较简单了网上也比较常见
修改send函数的参数即可

核心代码

            const MyXMLHttpRequest = window.XMLHttpRequest;
            class InterceptXML extends window.XMLHttpRequest {
                constructor(...p) {
                    super(...p);
                }

                addEventListener(t, fn) {
                    super.addEventListener(t, fn);
                }

                _statusText = "";

                get statusText() {
                    return this._statusText || super.statusText;
                }

                set statusText(val) {
                    this._statusText = val;
                }

                _status = "";

                get status() {
                    return this._status || super.status;
                }

                set status(val) {
                    this._status = val;
                }

                _response = "";

                get response() {
                    return this._response || super.response;
                }

                set response(val) {
                    this._response = val;
                }

                _responseText = "";

                get responseText() {
                    return this._responseText || super.responseText;
                }

                set responseText(val) {
                    this._responseText = val;
                }

                /**
                 * 完全覆盖 将原请求转移到另一个
                 */
                cover(method, url) {
                    const xml = new MyXMLHttpRequest();
                    xml.open(method, url, true);
                    this.addEventListener = (type, callback) => {
                        if (type == "loadend") {
                            this.getAllResponseHeaders = () =>
                                xml.getAllResponseHeaders();

                            xml.addEventListener(type, () => {
                                this.statusText = xml.statusText;
                                this.status = xml.status;
                                this.response = xml.response;
                                this.responseText = xml.responseText;
                                console.log("拦截：", this.response);
                                this.response = {data:['拦截了']};
                                callback();
                            });
                        } else xml.addEventListener(type, callback);
                    };

                    this.setRequestHeader = (...r) =>
                        xml.setRequestHeader(...r);
                    this.send = () => xml.send();
                }

                afterRender(call) {
                    if (window.requestIdleCallback) {
                        requestIdleCallback(() => {
                            call();
                        });
                    } else if (window.requestAnimationFrame) {
                        requestAnimationFrame(() => {
                            requestAnimationFrame(() => {
                                call();
                            });
                        });
                    } else {
                        setTimeout(() => {
                            call();
                        }, 32);
                    }
                }

                open(method, url) {
                    if (method === "GET" && url.includes('/todo')) {
                        return this.cover(method, url);
                    }
                }
            }

            window.XMLHttpRequest = InterceptXML;

以下代码为拦截get获取评论列表和post拦截发送请求业务代码可供参考文章来源地址https://www.toymoban.com/news/detail-723281.html

//匹配 发送评论请求路径
const CommentReg = new RegExp(
    /\\/api\\/.+\\/.+\\/[0-9a-f]{24}\\/comment(\\/[0-9a-f]{24})*/
);
//匹配 获取评论列表请求路径
const GetCommentsReg = new RegExp(
    /\\/api\\/.+\\/.+\\/[0-9a-f]{24}\\/comments*/
);

const MyXMLHttpRequest = window.XMLHttpRequest;

class InterceptXML extends window.XMLHttpRequest {
    constructor(...p) {
        super(...p);
    }

    addEventListener(t, fn) {
        super.addEventListener(t, fn)
    }

    get hasInjectDom() {
        return document.getElementById("insertCheckBox")
    }

    _statusText = "";
    
    get statusText() {
        return this._statusText || super.statusText;
    }

    set statusText(val) {
        this._statusText = val;
    }

    _status = "";

    get status() {
        return this._status || super.status;
    }

    set status(val) {
        this._status = val;
    }

    
    _response = "";

    get response() {
        return this._response || super.response;
    }

    set response(val) {
        this._response = val;
    }

    
    _responseText = "";

    get responseText() {
        return this._responseText || super.responseText;
    }

    set responseText(val) {
        this._responseText = val;
    }

    
    cover(method, url) {
        const xml = new MyXMLHttpRequest();
        xml.open(method, url, true);

        this.addEventListener = (type,callback) => {
            if (type == 'load') {
                this.getAllResponseHeaders = () => {
                    return xml.getAllResponseHeaders()
                }
                xml.addEventListener(type, () => {
                    this.statusText = xml.statusText;
                    this.status = xml.status;
                    this.response = xml.response;
                    this.responseText = xml.responseText;
                    callback()
                })
                // 处理dom
                xml.addEventListener("loadend", () => {
                    requestAnimationFrame(() => {
                        requestAnimationFrame(() => {
                            
                        })
                    })
                })
            }
            else xml.addEventListener(type,callback)
        }

        this.setRequestHeader = (...r) => {
            xml.setRequestHeader(...r)
        }

        this.send = () => {
            xml.send();
        }
    }

    open(method, url) {
        if (method === 'GET' && GetCommentsReg.test(url)) { 
           return this.cover(method, url);
        } else {
            if (["POST", "PUT","DELETE"].includes(method) && CommentReg.test(url) && this.hasInjectDom) {
                const originalSend = super.send;
                super.send = function (data) {
                    const modifiedData = Object.assign(
                        { is_private: window._is_private_comment || false },
                        JSON.parse(data)
                    );
                    originalSend.call(this,JSON.stringify(modifiedData));
                };
            }
            super.open(method, url);
        }
    }
}

window.XMLHttpRequest = InterceptXML;