AngularJS HttpInterceptor注入Toastr服务引发无限循环问题

嘿，我之前也踩过这个坑！当HttpInterceptor和基于Toastr的AlertService搭配使用时，无限循环的问题十有八九是形成了闭环逻辑——拦截器捕获到HTTP错误后调用AlertService弹出通知，结果AlertService里的某些操作又触发了新的HTTP请求，被拦截器再次捕获，反复循环停不下来。结合你的代码，我给你几个针对性的解决思路：

1. 检查AlertService是否触发了额外HTTP请求 #

先排查你的notificationError、notificationWarning这些方法里，有没有发起HTTP请求的逻辑（比如把错误信息上报到后端）。如果有的话，这就是循环的根源：

• 拦截器捕获错误 → 调用AlertService上报错误 → 上报请求失败 → 拦截器再次捕获错误 → 再次上报...

解决办法：给特定请求添加「跳过拦截」标记 #

在AlertService的上报方法里，给请求头加一个自定义标识，让Interceptor忽略这个请求：

// AlertService中添加上报逻辑的例子
reportErrorToBackend(errorMsg: string) {
  this.http.post('/api/error-report', { message: errorMsg }, {
    headers: new HttpHeaders({ 'Skip-Interceptor': 'true' }) // 添加跳过标记
  }).subscribe();
}

然后在你的HttpInterceptor里，先检查这个标记，存在就直接放行：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 跳过带有Skip-Interceptor头的请求
  if (request.headers.has('Skip-Interceptor')) {
    // 移除标记后再放行，避免后端收到不必要的头信息
    return next.handle(request.clone({ 
      headers: request.headers.delete('Skip-Interceptor') 
    }));
  }

  // 你的正常拦截逻辑
  return next.handle(request).pipe(
    catchError(error => {
      this.alertService.notificationError(error.message);
      return throwError(() => error);
    })
  );
}

2. 排除Toastr相关的静态资源请求（如果有） #

如果你的Toastr是通过外部CDN加载的静态资源（比如CSS、JS文件），而Interceptor拦截了所有HTTP请求，当这些静态资源加载失败时，会触发拦截器的错误处理，调用AlertService；而AlertService又需要加载Toastr的静态资源，再次触发错误，形成循环。

解决办法：在Interceptor里排除特定URL #

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 排除Toastr的CDN资源请求，根据你的实际CDN地址调整
  const excludedUrls = ['https://cdnjs.cloudflare.com/ajax/libs/toastr.js/'];
  if (excludedUrls.some(url => request.url.includes(url))) {
    return next.handle(request);
  }

  // 正常拦截逻辑...
}

3. 避免Interceptor无限重试错误请求 #

如果你的Interceptor里加了重试逻辑，一定要设置重试次数上限，否则错误请求会被反复重试，同时每次重试失败都会调用AlertService，形成循环。

解决办法：给重试逻辑加次数限制 #

import { retry } from 'rxjs/operators';

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request).pipe(
    retry(2), // 最多重试2次，避免无限循环
    catchError(error => {
      this.alertService.notificationError(error.message);
      return throwError(() => error);
    })
  );
}

4. 解决可能的循环依赖问题 #

如果你的Interceptor直接注入了AlertService，而AlertService又注入了HttpClient（依赖Interceptor），就会形成循环依赖，导致奇怪的无限循环问题。

解决办法：用Injector延迟获取AlertService #

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

constructor(private injector: Injector) {}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 延迟获取AlertService，避免循环依赖
  const alertService = this.injector.get(AlertService);

  return next.handle(request).pipe(
    catchError(error => {
      alertService.notificationError(error.message);
      return throwError(() => error);
    })
  );
}

内容的提问来源于stack exchange，提问作者Chouret Robin