XMLHttpRequest拦截请求和响应

环境： angular

实现： 拦截请求向请求信息增加字段

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

比较简单了网上也比较常见

修改send函数的参数即可

typescript 复制代码

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;