XMLHttpRequest拦截请求和响应

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

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

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;