Angular11中HttpClient get方法catchError错误处理报错如何解决

错误根因 #

catchError RxJS操作符要求传入的错误处理函数必须返回ObservableInput类型的值（即可被转为Observable的类型），你当前编写的errorHandler仅执行了日志打印逻辑，无返回值（返回类型为void），不符合类型约束，因此触发TS2345类型报错。

修复方案 #

根据你的业务需求二选一即可：

方案1：请求失败返回兜底值 #

适合需要保证订阅链路不中断、返回默认值的场景：

1. 先从rxjs导入of操作符
2. 修改errorHandler返回匹配类型的兜底值

import { of } from 'rxjs';

// 修改返回类型，返回和接口一致的PortfolioEpicModel数组Observable
errorHandler(error: HttpErrorResponse): Observable<PortfolioEpicModel[]> {
  console.info(error.message);
  // 这里可以自定义兜底值，示例返回空数组
  return of([] as PortfolioEpicModel[]);
}

方案2：请求失败抛出错误给上层处理 #

适合需要上层调用方自行捕获处理错误的场景：

1. 先从rxjs导入throwError操作符
2. 修改errorHandler抛出错误流

import { throwError } from 'rxjs';

errorHandler(error: HttpErrorResponse): Observable<never> {
  console.info(error.message);
  // 抛出错误流，上层订阅时可在error回调中接收处理
  return throwError(() => error);
}

额外注意点 #

如果你的errorHandler内部需要用到当前服务类的this上下文，调用时需要绑定this：

.pipe(catchError(this.errorHandler.bind(this)))

或者直接把errorHandler定义为箭头函数：

errorHandler = (error: HttpErrorResponse): Observable<never> => {
  // 内部可以正常使用this调用服务的其他属性方法
  console.info(error.message);
  return throwError(() => error);
}

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