Angular中能否用单个Interceptor同时处理HTTP请求与响应？

完全可行，Angular的HTTP拦截器设计本身就支持在同一个拦截器里同时处理出站请求修改和入站响应捕获，不需要强制拆分成多个独立拦截器。

原理说明 #

Angular拦截器的intercept方法接收原始HttpRequest和HttpHandler两个参数，返回Observable<HttpEvent<any>>。我们可以先对请求做修改（比如添加请求头），再通过next.handle(modifiedReq)触发请求流转，最后借助RxJS操作符（比如tap、map）对返回的响应流做处理（比如捕获响应数据）。

示例代码 #

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class CombinedInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 处理出站请求：修改请求头
    const modifiedRequest = request.clone({
      setHeaders: {
        'Authorization': 'Bearer your-auth-token',
        'X-App-Version': '1.0.0'
      }
    });

    // 处理入站响应：捕获并处理响应数据
    return next.handle(modifiedRequest).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          console.log('收到响应数据:', event.body);
          // 这里可以做数据转换、缓存、日志记录等操作
        }
      })
    );
  }
}

关于拆分拦截器的建议 #

拆分拦截器是代码组织的最佳实践（比如一个拦截器专门处理认证头，另一个专门处理响应日志），目的是让每个拦截器职责单一、更易维护和扩展，但这不是技术上的强制要求。如果你的业务逻辑比较简单，把请求和响应处理放在同一个拦截器里完全没问题。

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