Angular / Typescript，在错误回调中调用订阅者的下一个http错误回调答案

【问题标题】：Angular/Typescript, calling next on subscriber in error call back on http error callbackAngular / Typescript，在错误回调中调用订阅者的下一个http错误回调
【发布时间】：2020-09-30 14:01:59
【问题描述】：

我在这里看到了几个类似的问题，但似乎没有任何问题可以解决我的问题，所以如果已经有人问过这个问题，我深表歉意。

我正在使用 Angular 9（显然是 Typescript），将 Angular http 调用包装在可观察模式中，因为我只想让此方法返回 null 以将可观察对象从调用者那里抽象出来。

 public createCase = (caseTypeId: string, displayName: string) : Observable<CaseData> => {
    const apiURL = `${environment.baseApi}/case`;
    return new Observable<CaseData>((observable) => {
      this.http
        .post<CaseData>(apiURL, newCase)
        .subscribe(
          caseData => observable.next(caseData),
          error => {
            console.log(error.status);
            observable.next(null);
          },
          () => observable.complete());
    });
}

我在一个单独的类中使用以下代码调用上述方法：

public outerCreateCase = async (caseTypeId: string) : Promise<CaseData> => {
    let response = await this._caseApi.createCase(caseTypeId, "TEST").toPromise();    
    ... do stuff based on response ...
    return response;
}

围绕这个问题有一些逻辑被删除，但我认为这突出了我的观点。基本上，我只想让 http 调用返回一个 null 给 promise，因为当我的调用嵌套多个方法时，可观察模式变得很麻烦。外部调用的调用者只需要一个响应对象或一个 null 就可以了。问题是当 http 调用返回错误时，outerCreateCase 中的 await 之后的代码永远不会被调用。 http调用成功后返回正常。有人知道为什么会这样吗？

提前谢谢你！

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

您不需要使用new Observable。您可以只使用catchError 运算符。代码应如下所示。

import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';
......
this.http
  .post<CaseData>(apiURL, newCase)
  .pipe(
    catchError => {
      console.log(error.status);
      return of(null)
    }
  );

【讨论】：