Angular拦截器中调用API服务的方法及多次触发问题解决

这个问题的核心原因很明确：你在拦截器里调用的API请求，会被同一个拦截器再次拦截，进而触发新一轮的API调用，形成无限循环。下面是具体的解决方案和代码优化建议：

一、先搞清楚问题根源 #

当你在拦截器的tap操作里调用showAcknowledgement()时，这个方法内部的getNotice请求会被当前拦截器捕获，拦截器又会检查响应（如果有的话），再次触发API调用，循环往复直到浏览器限制请求次数。

二、分步解决 #

1. 排除目标API请求，避免被拦截 #

首先要在拦截器里添加判断：如果当前请求是你要调用的通知接口，直接放行，不执行后续的拦截逻辑。

2. 用正确的RxJS操作符处理流 #

tap是用来执行副作用（比如打印日志、修改变量）的操作符，不适合用来发起新的HTTP请求。我们应该用switchMap这类操作符来串联响应流和新的API调用流。

3. 优化API服务代码 #

你的API服务里有个明显的错误：filter是用来过滤数组元素的，不是用来做条件判断的；另外要处理订阅的取消，避免内存泄漏。

三、修改后的代码示例 #

优化后的API服务 #

import { take, tap, catchError, throwError } from 'rxjs';

// 修改方法为返回Observable，方便拦截器处理流
showAcknowledgement(): Observable<any> { 
  return this.noticeService.getNotice(ConstUrls.NoticeManagement.GetUserNotice).pipe(
    tap((data: any) => { 
      if (data.isSuccessful === true) { 
        // 如果你需要从data.data里取第一个通知，用find更合适；如果要全部处理用forEach
        const targetNotice = data.data.find((res: any) => true);
        if (targetNotice) {
          this.noticeText = targetNotice.noticeText;
        }
      } else if (data.isSuccessful === false) { 
        this.message = [{ field: "", message: data.message[0].message }]; 
        this.objError = this.message; 
        this.showError = true; 
        window.scrollTo({ top: 0, behavior: 'smooth' }); 
      }
    }),
    catchError((error) => { 
      this.message = [{ field: "", message: "请求失败，请稍后重试" }]; 
      this.objError = this.message; 
      this.showError = true; 
      window.scrollTo({ top: 0, behavior: 'smooth' }); 
      return throwError(() => error);
    }),
    take(1) // 自动取消订阅，避免内存泄漏
  );
}

修改后的拦截器 #

import { switchMap, of, catchError } from 'rxjs';

constructor(private yourApiService: YourApiService) {} // 注入你的API服务

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
  // 关键：排除通知接口的请求，避免循环拦截
  if (req.url.includes(ConstUrls.NoticeManagement.GetUserNotice)) {
    return next.handle(req);
  }

  return next.handle(req).pipe( 
    switchMap((resp) => { 
      if (resp instanceof HttpResponse && resp.body.isNotificationAvailable) { 
        // 调用API服务，无论结果如何都返回原响应，不影响业务流程
        return this.yourApiService.showAcknowledgement().pipe(
          map(() => resp),
          catchError(() => of(resp))
        );
      }
      // 不需要调用API时，直接返回原响应
      return of(resp);
    })
  );
}

四、额外注意事项 #

• 确保ConstUrls.NoticeManagement.GetUserNotice是可以匹配到请求URL的片段（比如完整路径或唯一标识），避免误判其他请求。
• 如果你的API服务是Angular提供的单例服务，直接注入即可，无需额外配置。
• 推荐在模板中使用async管道处理Observable数据，进一步减少手动订阅的内存泄漏风险。

内容的提问来源于stack exchange，提问作者Mohamed Abubakar