JS如何实现网络请求拦截

XMLHttpRequest

fetch

XMLHttpRequest

open

send

setRequestHeader

(function() {
    const originalXHRopen = XMLHttpRequest.prototype.open;
    const originalXHRsend = XMLHttpRequest.prototype.send;

    XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
        // 可以在这里获取或修改请求方法和URL
        console.log(`XHR open: ${method} ${url}`);
        this._method = method; // 存储方法和URL，以便send时使用
        this._url = url;
        originalXHRopen.apply(this, arguments);
    };

    XMLHttpRequest.prototype.send = function(body) {
        // 可以在这里检查或修改请求体
        console.log(`XHR send to ${this._url} with body:`, body);

        // 举例：修改请求头
        // this.setRequestHeader('X-Custom-Header', 'Intercepted!');

        // 可以在这里添加一个事件监听器来处理响应
        this.addEventListener('load', () => {
            if (this.readyState === 4) {
                console.log(`XHR response from ${this._url}:`, this.responseText);
                // 可以在这里统一处理响应数据，比如解密、格式化等
            }
        });

        originalXHRsend.apply(this, arguments);
    };
})();

fetch

fetch

Request

Response

(function() {
    const originalFetch = window.fetch;

    window.fetch = function(input, init) {
        // input 可以是 URL 字符串，也可以是 Request 对象
        // init 是请求的配置对象，如 method, headers, body 等

        let url = '';
        let method = 'GET';
        let headers = {};
        let body = null;

        if (typeof input === 'string') {
            url = input;
            method = (init && init.method) || 'GET';
            headers = (init && init.headers) || {};
            body = (init && init.body) || null;
        } else if (input instanceof Request) {
            // 如果 input 是 Request 对象，需要克隆它才能读取 body
            url = input.url;
            method = input.method;
            headers = Object.fromEntries(input.headers.entries()); // 转换为普通对象方便操作
            // Request.body 是一个 ReadableStream，只能读取一次
            // 所以如果需要修改或查看 body，必须克隆 Request
            if (input.bodyUsed) {
                // 如果 body 已经被使用过，这里就无法再次读取了
                // 通常在拦截器里，input.bodyUsed 应该为 false
                console.warn('Request body already used.');
            } else {
                // 克隆请求，以便后续可以再次使用原始请求体
                const clonedRequest = input.clone();
                // 异步读取 body
                clonedRequest.text().then(text => {
                    body = text;
                    console.log(`Fetch request body for ${url}:`, body);
                });
            }
        }

        console.log(`Fetch request: ${method} ${url}`);
        // 可以在这里修改 init 对象，比如添加统一的认证头
        const newInit = { ...init };
        newInit.headers = {
            ...newInit.headers,
            'X-Intercepted-By': 'MyAwesomeInterceptor'
        };

        return originalFetch(input, newInit)
            .then(response => {
                // 可以在这里处理响应，比如统一的错误码处理
                if (!response.ok) {
                    console.error(`Fetch error for ${url}: ${response.status}`);
                }
                // 响应对象也是不可变的，如果需要修改响应，需要克隆或创建新的Response
                const clonedResponse = response.clone();
                clonedResponse.json().then(data => {
                    console.log(`Fetch response data for ${url}:`, data);
                }).catch(e => {
                    // 某些响应可能不是JSON，比如图片或文本
                    console.log(`Fetch response text for ${url}:`, e);
                });
                return response; // 返回原始响应或修改后的响应
            })
            .catch(error => {
                console.error(`Fetch network error for ${url}:`, error);
                throw error; // 抛出错误以便调用链继续处理
            });
    };
})();

fetch

Request

Response

clone()

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
        .then(registration => {
            console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch(error => {
            console.error('Service Worker registration failed:', error);
        });
}

service-worker.js

// service-worker.js
self.addEventListener('install', (event) => {
    console.log('Service Worker installing...');
    self.skipWaiting(); // 强制新的 Service Worker 立即激活
});

self.addEventListener('activate', (event) => {
    console.log('Service Worker activating...');
    event.waitUntil(clients.claim()); // 确保 Service Worker 控制所有客户端
});

self.addEventListener('fetch', (event) => {
    // 拦截所有网络请求
    const request = event.request;
    console.log(`Service Worker intercepted fetch for: ${request.url}`);

    // 示例1：修改请求头
    const newHeaders = new Headers(request.headers);
    newHeaders.set('X-Service-Worker-Intercepted', 'true');
    const modifiedRequest = new Request(request, { headers: newHeaders });

    // 示例2：模拟响应（Mocking）
    if (request.url.includes('/api/mockdata')) {
        const mockResponse = new Response(JSON.stringify({
            message: 'This is mocked data from Service Worker!'
        }), {
            headers: { 'Content-Type': 'application/json' }
        });
        event.respondWith(mockResponse);
        return; // 阻止默认行为
    }

    // 示例3：缓存策略 - 优先从缓存获取，否则从网络获取并缓存
    event.respondWith(
        caches.match(request).then((response) => {
            if (response) {
                console.log(`Serving from cache: ${request.url}`);
                return response;
            }
            console.log(`Fetching from network: ${request.url}`);
            return fetch(modifiedRequest).then((networkResponse) => {
                // 检查响应是否有效，例如状态码200
                if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
                    return networkResponse;
                }
                const responseToCache = networkResponse.clone();
                caches.open('my-app-cache').then((cache) => {
                    cache.put(request, responseToCache);
                });
                return networkResponse;
            });
        }).catch(error => {
            console.error('Service Worker fetch error:', error);
            // 可以在这里返回一个离线页面或错误响应
            return new Response('Offline content or error page', { status: 503, headers: { 'Content-Type': 'text/plain' } });
        })
    );
});

fetch

Request

body

body

request.clone()

body

response.clone()

Response

fetch

async/await

XMLHttpRequest

fetch

/

/js/

/js/