RxJS 6.6.3使用catchError报参数类型不匹配错误如何解决？

报错根本原因 #

RxJS v6.x 中 catchError 操作符的回调函数必须返回一个合法的 ObservableInput 类型值（包括Observable、Promise、数组等可迭代对象），不允许返回undefined。你的代码里两类场景会返回undefined触发报错：

1. 401分支直接写了空return，没有返回Observable类型值
2. 非401的HttpErrorResponse、非HttpErrorResponse类型的错误场景也没有配置对应的返回逻辑

修复方案 #

• 401分支补充返回空Observable
  如果401分支的业务逻辑是跳转登录页、清空权限这类不需要继续向下游流发射数据的场景，直接返回RxJS内置的EMPTY即可，它会直接触发流的complete状态，不发射任何值，完全符合ObservableInput类型要求。
• 补充全部分支的返回逻辑
  非401的错误场景如果需要把错误继续抛给下游处理，可以返回throwError(() => error)；如果需要返回兜底的业务数据，可以返回of(你的兜底数据)。

修复后代码示例 #

import { catchError, EMPTY, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

// 省略外层其他代码
catchError((error: any) => {
  if (error instanceof HttpErrorResponse) {
    // 你的其他Http错误预处理逻辑
    if (error.status === 401) {
      // 你的401业务逻辑：比如清空本地存储、跳转登录页等
      return EMPTY; // 替换原来的空return
    }
  }
  // 非401/非Http错误的场景，把错误继续抛出给下游处理
  return throwError(() => error);
})

注意事项 #

• EMPTY和throwError都是RxJS 6.6.3版本原生支持的API，无需额外安装依赖
• 如果401场景需要给下游返回默认值，把return EMPTY替换为of(你的默认值)即可，比如of(null)或者业务自定义的 fallback 数据

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