首页  编辑  

拦截Ajax请求

Tags: /Node & JS/   Date Created:
在网页中,如何拦截AJAX特定请求并进行响应的处理,并且不影响原来的业务逻辑?
    const originalXHR = window.XMLHttpRequest;

    // 替换XMLHttpRequest
    window.XMLHttpRequest = function() {
        const xhr = new originalXHR();

        // 保存原生open方法
        const originalOpen = xhr.open;

        // 保存原生send方法
        const originalSend = xhr.send;

        // 重写open方法
        xhr.open = function(method, url) {
            this._method = method;
            this._url = url;
            return originalOpen.apply(this, arguments);
        };

        // 重写send方法
        xhr.send = function(d) {
            this._requestData = d;

            // 保存原生onreadystatechange
            const originalOnreadystatechange = this.onreadystatechange;

            // 重写onreadystatechange
            this.onreadystatechange = function() {
                // 调用原始回调函数
                if (originalOnreadystatechange) {
                    return originalOnreadystatechange.apply(this, arguments);
                }

                if (this.readyState === 4) {
                    // 拦截特定URL的请求
                    if (this._url.includes('queryDashboardPageList')) {
                        console.log('拦截到请求: queryDashboardPageList');
                        data = JSON.parse(this.responseText);
                        run();
                    }

                    if (this._url.includes('/api/users/all')) {
                        console.log('拦截到请求: users');
                        const result = JSON.parse(this.responseText);
                        result.data.forEach(user => users.set(user.id, user));
                    }
                }
            };

            return originalSend.apply(this, arguments);
        };

        return xhr;
    };