如何在Angular中捕获第三方库发起的所有fetch请求？

Angular 内置的 HttpInterceptor 仅能拦截通过 Angular HttpClient 发起的请求，第三方库调用的原生 fetch API 不在其拦截范围内，所以直接用 Angular 拦截器解决不了你的问题。

要捕获页面上所有 fetch 请求（包括第三方库发起的），可以通过重写原生 fetch 方法实现，结合 Angular 服务封装后可在应用中方便复用。

1. 创建 Fetch 拦截服务 #

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FetchInterceptorService {
  constructor() {
    // 保存原生 fetch 方法
    const originalFetch = window.fetch;

    // 重写全局 fetch
    window.fetch = async (...args) => {
      // 请求发起前：记录请求信息、修改参数等
      const [url, options] = args;
      console.log('捕获 Fetch 请求:', { url, method: options?.method || 'GET' });

      try {
        // 执行原生请求获取响应
        const response = await originalFetch(...args);

        // 响应返回后：读取响应数据（需克隆响应，避免流被消耗）
        const clonedResp = response.clone();
        const respData = await clonedResp.json().catch(() => clonedResp.text());
        console.log('Fetch 响应数据:', { status: response.status, data: respData });

        return response;
      } catch (error) {
        // 捕获请求错误
        console.error('Fetch 请求失败:', error);
        throw error;
      }
    };
  }
}

2. 启动时初始化服务 #

在应用启动时加载该服务，触发 fetch 重写逻辑：

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { FetchInterceptorService } from './app/services/fetch-interceptor.service';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    // 初始化拦截服务
    moduleRef.injector.get(FetchInterceptorService);
  })
  .catch(err => console.error(err));

3. 自定义扩展逻辑 #

你可以根据需求在重写的 fetch 中添加自定义处理：

• 统一给所有请求添加公共请求头
• 过滤特定 URL 的请求并做特殊处理
• 将请求/响应数据存入日志或状态管理库
• 拦截错误并统一抛出自定义异常

• 重写原生 fetch 会影响页面所有使用该 API 的代码，需确保处理逻辑不会破坏第三方库的原有功能
• 响应流只能读取一次，必须克隆响应后再读取数据，避免影响原请求的响应处理
• 如果第三方库使用的是 XMLHttpRequest，需用类似方式重写 XMLHttpRequest 的 open 和 send 方法来拦截

内容的提问来源于stack exchange，提问作者Emili Bellot Pulido