升级至Angular 7与RxJS 6.3.3后Observable报错求助

看起来你在升级后踩了RxJS类型系统和Angular Http模块兼容的坑，我帮你梳理下错误根源和修复方案：

错误核心原因 #

你的报错信息指向三个关键问题：

1. catchError返回值不符合要求：RxJS 6要求catchError必须返回ObservableInput类型（Observable、Promise、数组或可迭代对象），但你的代码里要么返回了MyResponseClass实例，要么用了RxJS 6已经废弃的Observable.throw写法。
2. map操作符导致嵌套Observable：你的test函数返回的是Observable<MyResponseClass | null>，而map会把这个Observable直接包裹在另一个Observable里，形成Observable<Observable<MyResponseClass | null>>，和你声明的返回类型不匹配。
3. 新旧Http模块混用：你同时使用了@angular/http的Headers/Response和@angular/common/http的HttpClient，这两个模块不兼容，会导致类型混乱。

一步步修复方案 #

1. 更新导入语句

先把旧的Http模块依赖替换成HttpClient对应的工具，同时导入RxJS 6需要的throwError和mergeMap：

import { Observable, of, throwError } from 'rxjs';
import { map, catchError, mergeMap } from 'rxjs/operators';
import { Injectable, Inject, Optional, InjectionToken } from '@angular/core';
// 移除@angular/http的导入，换成HttpClient相关的类型
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';

2. 修正test函数的参数类型

HttpClient默认返回响应体，而非旧的Response对象，如果你需要获取状态码等响应元数据，要在请求配置里加observe: 'response'，这里先适配参数类型：

protected test(response: HttpErrorResponse | HttpResponse<any> | any): Observable<MyResponseClass | null> {
  // 适配HttpClient的响应/错误对象
  const status = response.status ?? 200;
  
  if (status === 200) {
    let result200: any = null;
    // ... 你的原有逻辑代码 ...
    return of<MyResponseClass | null>(result200);
  }
  return of<MyResponseClass | null>(null); // 无需多余的类型断言
}

3. 重构get函数的Observable流

主要修改点：用mergeMap替换map来扁平化嵌套Observable，修复catchError的错误处理逻辑：

get(): Observable<MyResponseClass | null> {
  const url_ = 'your-target-url';
  const options_ = {
    method: 'get',
    // 用HttpHeaders替代旧的Headers
    headers: new HttpHeaders({ 
      'Content-Type': 'application/json', 
      'Accept': 'application/json' 
    }),
    // 如果需要获取完整响应对象（含status、headers），打开下面这行：
    // observe: 'response'
  };

  return this.http.request(url_, options_).pipe(
    // 用mergeMap替代map：因为test返回Observable，mergeMap会自动订阅并扁平化流
    mergeMap((response_: any) => this.test(response_)),
    catchError((err: any) => {
      // 正确判断HttpClient抛出的错误类型
      if (err instanceof HttpErrorResponse) {
        try {
          return this.test(err);
        } catch (e) {
          // RxJS 6+用throwError工厂函数替代Observable.throw
          return throwError(() => e);
        }
      } else {
        return throwError(() => err);
      }
    })
  );
}

关键修改点解释 #

• mergeMap替代map：map会把test返回的Observable作为值传递，导致嵌套流；mergeMap会订阅内部的Observable，直接把test的结果emit到外层流中，保证类型是Observable<MyResponseClass | null>。
• throwError替代Observable.throw：RxJS 6移除了Observable.throw静态方法，改用throwError操作符，并且推荐传入工厂函数（() => e）来避免不必要的计算。
• 替换Headers为HttpHeaders：HttpClient和旧Http模块的头对象不兼容，必须使用@angular/common/http下的HttpHeaders。
• 错误对象判断修正：catchError里的caught是被捕获的Observable，不是响应对象，正确的错误类型判断应该是检查err instanceof HttpErrorResponse。

这样修改后，你的类型错误应该就能解决了，同时也符合Angular 7和RxJS 6的最佳实践。

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