React中扩展默认fetch()方法拦截网络请求的问题求助

你的代码存在两个核心问题，导致无法正确拦截并捕获目标请求：

• 重复发起了独立的fetch请求：handleRequest里重新调用fetch(request.url)，这不是拦截原请求的响应，而是额外发了一次请求，不仅浪费资源，还因为没携带原请求的headers、body等参数，导致拿到的响应和原请求不一致。
• 没有绑定原请求的响应处理逻辑：当前逻辑只是异步调用了handleRequest，但没有和原fetch的Promise链关联，无法获取原请求的真实响应。

以下是修正后的拦截实现：

const interceptRequest = () => {
  const originalFetch = window.fetch;

  window.fetch = async function (...args) {
    // 执行原请求并获取响应
    const response = await originalFetch.apply(this, args);
    // 克隆响应（因为响应流只能读取一次）
    const responseClone = response.clone();
    
    try {
      // 解析克隆后的响应数据
      const responseData = await responseClone.text();
      console.log('拦截到的响应数据:', responseData);
      
      // 这里可以根据url判断是否是f2发起的请求，再处理数据
      if (args[0].includes('f2的目标请求url标识')) {
        // 解析所需查询内容，处理你的f1功能逻辑
        console.log('处理f1功能所需数据:', responseData);
      }
    } catch (error) {
      console.error('解析响应失败:', error);
    }

    // 返回原响应，不影响原请求逻辑
    return response;
  };
};

关键改进点说明： #

• 直接复用原请求的参数执行originalFetch，避免重复请求
• 克隆响应对象：响应流是一次性的，必须克隆后才能在拦截逻辑和原请求中分别读取
• 绑定原请求的Promise链，确保能获取真实的响应数据
• 增加了请求URL判断逻辑，可以精准拦截f2发起的目标请求

额外注意事项： #

• 确保interceptRequest在f2功能初始化前执行，比如在React的useEffect里（组件挂载时调用），避免拦截逻辑晚于请求发起
• 如果f2使用的不是fetch而是XMLHttpRequest，需要额外拦截XMLHttpRequest的send方法，逻辑类似

内容的提问来源于stack exchange，提问作者Ohee Abdu