JS Fetch 请求拦截：原理与实现

在现代 Web 开发中，Fetch API 已成为进行网络请求的常用工具。然而，在某些情况下，我们可能需要对 Fetch 请求进行拦截，以便进行统一的处理，如添加请求头、处理错误等。本文将深入探讨 JS Fetch 请求拦截的原理与实现方法。

一、Fetch 请求拦截的原理

Fetch 请求拦截的核心思想是通过重写 fetch 函数，在请求发送前和响应返回后进行相应的处理。具体来说，我们可以创建一个新的函数，该函数在调用原始 fetch 函数之前和之后执行我们自定义的逻辑。

二、基本实现

1. 创建拦截函数

// 保存原始的 fetch 函数
const originalFetch = window.fetch;

// 重写 fetch 函数
window.fetch = function (input, init) {
    // 请求发送前的处理
    console.log('请求拦截：即将发送请求', input, init);

    // 调用原始的 fetch 函数
    return originalFetch(input, init).then((response) => {
        // 响应返回后的处理
        console.log('响应拦截：收到响应', response);
        return response;
    }).catch((error) => {
        // 错误处理
        console.log('错误拦截：发生错误', error);
        throw error;
    });
};

2. 使用示例

fetch('https://example.com/api/data')
   .then((response) => response.json())
   .then((data) => console.log(data))
   .catch((error) => console.error(error));

三、常见应用场景

1. 添加请求头

在实际项目中，我们经常需要为所有请求添加一些通用的请求头，如认证令牌、用户信息等。

window.fetch = function (input, init) {
    const newInit = {
       ...init,
        headers: {
           ...(init?.headers || {}),
            'Authorization': 'Bearer your_token',
            'User-Agent': 'Custom-User-Agent'
        }
    };
    return originalFetch(input, newInit);
};

2. 错误统一处理

当请求发生错误时，我们可以统一进行错误提示或记录。

window.fetch = function (input, init) {
    return originalFetch(input, init).catch((error) => {
        // 统一错误提示
        alert('网络请求出错，请稍后重试');
        // 记录错误（可根据实际情况选择记录方式）
        console.error('错误详情：', error);
        throw error;
    });
};

3. 请求日志记录

方便调试和监控请求情况。

window.fetch = function (input, init) {
    const startTime = Date.now();
    return originalFetch(input, init).then((response) => {
        const endTime = Date.now();
        console.log(`请求 ${input} 耗时：${endTime - startTime}ms`);
        return response;
    });
};

四、注意事项

1. 兼容性

虽然现代浏览器大多支持 Fetch API，但在一些旧版本浏览器中可能需要进行 polyfill。同时，重写 fetch 函数可能会对一些依赖原生 fetch 行为的库产生影响，需要进行充分测试。

2. 性能影响

过多的拦截逻辑可能会影响请求的性能，应尽量保持拦截函数的简洁。

五、总结

JS Fetch 请求拦截是一种强大的技术，它允许我们在不修改每个请求代码的情况下，对网络请求进行统一的管理和处理。通过合理运用请求拦截，我们可以提高代码的可维护性、增强应用的安全性和用户体验。在实际项目中，我们应根据具体需求，灵活运用这一技术，打造更加健壮和高效的 Web 应用。