Angular 2迁移至HttpClient后Interceptor关联map未触发问题

嗨，我帮你找到了问题所在，主要是两个细节没处理好，导致服务里的map根本没机会执行。咱们一步步来修复：

问题根源 #

1. 拦截器截断了事件流：你的拦截器只处理了HttpResponse类型的事件，对于其他事件（比如请求发送、进度通知这些）没有返回任何值，这就导致整个Observable流在中途断了，下游的操作符根本收不到最终的响应数据。
2. RxJS操作符用错了方式：HttpClient返回的是RxJS 5.5+的Observable，新版本里已经不推荐用链式的.map()了，必须用pipe()包裹的pipeable操作符，不然你的map逻辑根本不会被触发。

修复步骤 #

1. 修正拦截器代码 #

更新你的拦截器，确保所有事件都能正常传递，同时换成pipeable操作符：

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

@Injectable()
export class YourInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      map(event => {
        if (event instanceof HttpResponse) {
          if (event.ok) {
            // 把响应体里的data字段传给下游
            return event.body.data;
          } else {
            // 抛出错误，触发订阅里的error回调
            throw throwError(() => new Error(event.body.statusCode));
          }
        }
        // 关键！其他类型的事件要原样返回，不然流会断
        return event;
      }),
      catchError(error => {
        // 这里可以统一处理错误，比如打日志
        return throwError(() => error);
      })
    );
  }
}

2. 修正服务里的代码 #

把链式的.map()改成pipe()包裹的形式：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class BarService {
  constructor(private _httpClient: HttpClient) {}

  getFooData(url: string) {
    return this._httpClient.get(url).pipe(
      map(data => {
        console.log('Now I will be called!');
        return data.foo;
      })
    );
  }
}

3. 别忘了导入操作符 #

确保你在用到map、catchError这些操作符的时候，都是从rxjs/operators里导入的，别再依赖Observable的链式方法了。

为什么之前的代码不行？ #

• 拦截器里没返回非HttpResponse事件，导致流在中途就断了，下游的map根本收不到数据；
• 链式的.map()在HttpClient的Observable里已经不生效了，必须用pipeable操作符才能触发你的逻辑。

这样改完之后，服务里的map就会正常执行，订阅也能拿到你想要的foo数据啦！

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