Angular 7升级后HttpClient代码修改求助：flatMap与catch报错

你遇到的问题完全是因为RxJS 6+（Angular 6及以上版本默认集成）对操作符的使用方式做了重大改动——原来的链式操作（比如.flatMap()、.catch()）都需要放到.pipe()方法中，同时部分操作符的名称也有变更，API也有调整。下面一步步帮你修正代码：

第一步：确保导入正确的RxJS模块和操作符 #

首先要在组件/service文件顶部导入所需的内容：

import { Observable, throwError } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { HttpHeaders } from '@angular/common/http'; // 替代旧的Headers

第二步：修正代码中的几个关键问题 #

1. 替换废弃的Headers为HttpHeaders #

Angular 7中，旧的Headers（来自@angular/http）已经被废弃，现在要用@angular/common/http里的HttpHeaders。

2. 用mergeMap替代flatMap，并放到pipe中 #

RxJS 6里flatMap改名为mergeMap，而且必须放到pipe()内使用。你之前换成map会导致返回Observable<Observable<MyResponseClass>>，这就是报错的核心原因——如果getResponse返回的是Observable，就需要用mergeMap来"展平"嵌套的Observable；如果getResponse直接返回MyResponseClass，那用map没问题，但看你原代码的逻辑，mergeMap更贴合原本的业务流。

3. 用catchError替代.catch()，同样放到pipe中 #

原来的.catch()链式调用在RxJS 6里要换成catchError操作符，放到pipe()的参数列表里统一管理操作符。

4. 替换Observable.throw为throwError #

Observable.throw已经被废弃，现在用throwError来抛出错误Observable，符合RxJS 6+的API规范。

修正后的完整代码 #

get(): Observable<MyResponseClass | null> { 
  let url_ = some_url; 
  let options_: any = { 
    method: "get", 
    headers: new HttpHeaders({ 
      "Content-Type": "application/json", 
      "Accept": "application/json" 
    }) 
  }; 

  return this.http.request(url_, options_).pipe(
    mergeMap((response_: any) => { 
      return this.getResponse(response_); 
    }),
    catchError((response_: any) => { 
      if (response_ instanceof Response) { 
        try { 
          return this.getResponse(<any>response_); 
        } catch (e) { 
          return throwError(() => e); 
        } 
      } else {
        return throwError(() => response_); 
      }
    })
  );
}

额外说明 #

• 如果你的getResponse方法返回的不是Observable，而是直接返回MyResponseClass | null，那把mergeMap换成map就可以了，这样不会出现嵌套Observable的问题。
• 注意类型转换的部分，Angular 7的TypeScript版本更严格，尽量避免<any>这种强制类型转换，能明确类型的话最好明确下来。

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