XMLHttpRequest intercepts requests and responses

Environment: angular
Implementation: Interception of requests and adding fields to request information
Intercept response and filter return value
Response interception:
According to the XMLHttpRequest used by angular, the original request will be transferred to another XML that will listen to the return event and send the request in another century
Use get set to return the responseText and response obtained by the client according to your own wishes to implement response interception

request interception
It’s relatively simple and relatively common online.
Just modify the parameters of the send function

core code

 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;
                }

                /**
                 * Full coverage transfers the original request to another
                 */
                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("Interception:", this.response);
                                this.response = {<!-- -->data:['Intercepted']};
                                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" & amp; & amp; url.includes('/todo')) {<!-- -->
                        return this.cover(method, url);
                    }
                }
            }

            window.XMLHttpRequest = InterceptXML;

The following code is for interception get to obtain the comment list and post interception to send request business code for reference.

//Match send comment request path
const CommentReg = new RegExp(
    /\/api\/. + \/. + \/[0-9a-f]{<!-- -->24}\/comment( \/[0-9a-f]{24})*/
);
//Match to get the comment list request path
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()
                })
                // handle 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' & amp; & amp; GetCommentsReg.test(url)) {<!-- -->
           return this.cover(method, url);
        } else {<!-- -->
            if (["POST", "PUT","DELETE"].includes(method) & amp; & amp; CommentReg.test(url) & amp; & amp; 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;