Web应用常见请求拦截方式介绍

拦截 Web 应用的请求是前端开发中常见的需求，通常用于实现请求的预处理、日志记录、错误处理、权限验证等功能。以下是几种常见的拦截请求的方式：

1. 使用 XMLHttpRequest 拦截

XMLHttpRequest 是传统的 AJAX 请求方式，可以通过重写 XMLHttpRequest 的 open 和 send 方法来拦截请求。

const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.open = function(method, url) {
    // 在请求发送前进行拦截
    console.log(`Intercepted request: ${method} ${url}`);
    originalOpen.apply(this, arguments);
};

XMLHttpRequest.prototype.send = function(body) {
    // 在请求发送时进行拦截
    console.log('Request body:', body);
    originalSend.apply(this, arguments);
};

// 示例请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

2. 使用 fetch 拦截

fetch 是现代浏览器提供的用于发起网络请求的 API。可以通过重写 fetch 方法来拦截请求。

const originalFetch = window.fetch;

window.fetch = function(input, init) {
    // 在请求发送前进行拦截
    console.log(`Intercepted fetch request: ${input}`);

    // 可以修改请求参数
    if (init) {
        init.headers = init.headers || {};
        init.headers['Authorization'] = 'Bearer token';
    }

    return originalFetch(input, init).then(response => {
        // 在响应返回时进行拦截
        console.log('Fetch response:', response);
        return response;
    });
};

// 示例请求
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

3. 使用 Axios 拦截器

如果你使用的是 Axios 库，它提供了内置的拦截器功能，可以方便地拦截请求和响应。

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在请求发送前进行拦截
    console.log('Request interceptor:', config);
    config.headers['Authorization'] = 'Bearer token';
    return config;
}, error => {
    // 处理请求错误
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 在响应返回时进行拦截
    console.log('Response interceptor:', response);
    return response;
}, error => {
    // 处理响应错误
    return Promise.reject(error);
});

// 示例请求
axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

4. 使用 Service Worker 拦截

Service Worker 是一种运行在浏览器后台的脚本，可以拦截网络请求并对其进行处理。它通常用于实现离线缓存、请求拦截等功能。

// 注册 Service Worker
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
self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);

    // 拦截特定请求
    if (url.pathname === '/api/data') {
        event.respondWith(
            fetch(event.request)
                .then(response => {
                    console.log('Intercepted response:', response);
                    return response;
                })
                .catch(error => {
                    console.error('Fetch failed:', error);
                    return new Response('Service Unavailable', { status: 503 });
                })
        );
    }
});

5. 使用框架提供的拦截机制

如果你使用的是前端框架（如 React、Vue、Angular），这些框架通常提供了自己的请求拦截机制。例如，在 Vue 中，你可以使用 axios 或 vue-resource 的拦截器。

6. 使用浏览器扩展或代理工具

如果你需要在开发环境中拦截请求，可以使用浏览器扩展（如 Chrome 的 DevTools）或代理工具（如 Charles、Fiddler）来拦截和修改请求。

总结

拦截 Web 应用的请求可以通过多种方式实现，具体选择哪种方式取决于你的应用场景和需求。对于现代 Web 应用，推荐使用 fetch 或 Axios 的拦截器，因为它们提供了更简洁和强大的 API。如果你需要更底层的控制，可以考虑使用 Service Worker 或重写 XMLHttpRequest。