javascript - 处理由 from() 创建的 observable 中的 promise 抛出的错误

Question

我正在尝试在 Angular 应用程序中使用 AngularFire 库。一些 AngularFire 调用返回 promise ，我想将它们作为可观察对象来处理，而不是为了整个应用程序的一致性。我正在使用 rxjs v6

使用 from() 效果很好，并提供预期的行为，除非发生错误。

如果 promise 抛出异常，observable 似乎看不到它，并且堆栈跟踪被转储到控制台中，显示 Error: Uncaught (in promise)。

我的第一次尝试

返回 promise 的 AngularFire 调用:

deleteCampaign(id: string) {
  return from(this.campaignCollection.doc(id).delete());
}

调用代码:

    deleteCampaign(id: string) {
        return this.dataStorageService.deleteCampaign(id)
        .pipe(
            catchError(
                err => {
                    console.log('error when deleting campaign');
                    console.log(err);
                    return throwError(err);
                }
            )
        );
    }

在这种情况下，我在控制台中获得堆栈跟踪，并且 catchError 从未触发。

我的第二次尝试

我在 from 中的 promise 中添加了一个 catch，然后尝试将错误作为可观察对象重新抛出，因此它看起来像这样:

    deleteCampaign(id: string) {
        return from(this.campaignCollection.doc(id).delete().catch(
            err => {
                throwError(err);
            }
        ));
    }

我的第三次尝试

很像第二次尝试，但我尝试抛出一个普通的 javascript 错误。然而，这导致了相同的堆栈跟踪，并且它也没有被 observable 接收到。

    deleteCampaign(id: string) {
        return from(this.campaignCollection.doc(id).delete().catch(
            err => {
                throw(err);
            }
        ));
    }

这阻止了堆栈跟踪的发生，因为现在 promise 正在捕获它，但是调用代码仍然看不到错误。

我是不是用错了方法？我假设通过使用 from() 所有的错误处理都可以发生在可观察对象中，我可以不理会 promise。

我需要能够: 1. 在返回 promise 的地方没有错误处理代码，让 observable 处理它。 1. 让 promise catch block 能够重新抛出被 observable 捕获的错误。

---

解决方案如下:

从前端组件，使用 subscribe 中的 error 回调处理传递的错误

  onDelete(id: string) {
    this.loadingCampaigns = true;
    this.campaignService.deleteCampaign(id).subscribe(
      _ => {},
      err => {
        console.log('error detection from the component');
      }
    );
  }

从事件服务中，tap() 错误以便记录或以其他方式记录:

    deleteCampaign(id: string) {
        return this.dataStorageService.deleteCampaign(id)
        .pipe(
            tap(null, () => {console.log('tapped the error');} ),
        );
    }

最后，从数据存储组件什么都不做:

    deleteCampaign(id: string) {
        return from(this.campaignCollection.doc(id).delete());
    }

Answer 1

您可以将错误回调附加到 Observable.subscribe()。

Rx.Observable.from(Promise.reject('Boo!'))
    .subscribe(val => {
        console.log('success');
    },
    err => {
        console.log(err);
    });
// Boo!