使用http.post时Interceptor代码未触发，响应无法拦截原因排查

我从Stack Overflow复制了以下拦截器代码，希望修改outgoing request并拦截响应，但发现响应始终无法被拦截。请问这是什么原因？是否与使用Rxjs有关？拦截器代码如下：

import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from "@angular/common/http"; 
import {Injectable} from "@angular/core"; 
import {Observable} from "rxjs/Observable"; 
import 'rxjs/add/operator/do'; 
@Injectable() 
export class ...

嘿，我来帮你排查这个问题！无法拦截响应大概率和两个关键点有关：拦截器的注册配置，或者RxJS操作符的使用方式，我给你逐一分析：

1. 最常见的坑：拦截器未在Angular模块中正确注册 #

很多人写完拦截器代码就忘了把它加入到HTTP拦截器的提供者列表里，导致Angular根本不会启用这个拦截器。你需要在根模块（比如AppModule）的providers数组里注册它：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { YourInterceptorClass } from './path-to-your-interceptor';

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: YourInterceptorClass,
      multi: true // 这个必须设为true，支持多个拦截器
    }
  ]
})
export class AppModule {}

如果没加这一步，你的拦截器完全不会生效，自然拦截不到响应。

2. RxJS版本不兼容导致的操作符问题 #

从你代码里的import 'rxjs/add/operator/do'来看，你用的是RxJS 5.x版本的语法，但如果你的Angular版本是6及以上，对应的RxJS已经升级到6+，操作符变成了pipeable（需要通过pipe()方法调用），而且do操作符也改名为tap了。

针对RxJS 5.x的正确写法 #

如果还是用老版本RxJS，确保你的intercept方法正确返回流并处理响应：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 先修改 outgoing request
  const modifiedRequest = req.clone({
    // 比如添加headers: setHeaders: { 'Authorization': 'xxx' }
  });

  // 传递修改后的请求，并通过do操作符拦截响应
  return next.handle(modifiedRequest)
    .do(event => {
      // 只处理HttpResponse类型的事件
      if (event instanceof HttpResponse) {
        console.log('拦截到响应:', event.body);
        // 这里可以做响应的修改或其他处理
      }
    });
}

针对RxJS 6+的修正写法 #

如果是新版本RxJS，需要改用pipe()和tap操作符：

// 先导入需要的操作符
import { tap } from 'rxjs/operators';

// ...

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const modifiedRequest = req.clone({ /* 你的请求修改逻辑 */ });

  return next.handle(modifiedRequest).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('拦截到响应:', event.body);
      }
    })
  );
}

3. 其他可能的小问题 #

• 确保你在intercept方法里正确返回了next.handle(...)的Observable流，如果漏掉return，整个请求链就断了，自然接收不到响应。
• 如果你的请求发生了错误（比如4xx/5xx状态码），do/tap默认不会拦截错误流，你需要额外处理错误：比如在RxJS 5.x里用.do(null, error => { ... })，RxJS 6+里用pipe(tap(null, error => { ... }))或者单独的catchError操作符。

先检查拦截器的注册，这是最容易忽略的点！如果注册没问题，再根据RxJS版本调整操作符的用法，应该就能解决响应拦截不到的问题啦～

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