Angular rxjs：保持活动订阅处理http错误

Question

当一个按钮被点击时，一个 http 请求被调用：

let saveClickPush$ = Observable
    .fromEvent(this.saveButton.nativeElement, 'click')
    .pipe(
        switchMap(() => this.service.push(this.user)),
        share()
    );

所以，当它被点击时，我创建了两个可观察对象：

this.pushed$ = saveClickPush$.pipe(this.pushUser(), this.handleEmptyUser());
this.error$ = saveClickPush$.pipe(this.handleError<never>());

地点：

private handleError = <T>() => catchError<T, Array<{code: string, message: string}>>((error: ResponseError) => Observable.of(error.errors));
private handleEmptyUser = <T>() => catchError<T, AdministrationUser>(() => Observable.of(UserComponent.EMPTY_USER));

我要做的是在引发错误时：

1. 在pushed$ observable 上发出一个空用户。
2. 在error$ 上发出详细的错误消息。

但是，当引发 http 错误时，当我单击按钮时不会再次调用 http 请求。尽管我已尝试处理错误，但之前引发 http 错误时，似乎所有订阅者都已取消订阅。

我的服务是：

public push(user: AdministrationUser): Observable<AdministrationUser> {
    const buildURL = () => map((userId: string) => this.buildPushURL(userId));

    return Observable.of(user.id)
        .pipe(
            buildURL(),
            switchMap((url: string) => this.http.post(url, user)
                .pipe(
                    map(() => user),
                    catchError((error: Response) => Observable.throw(<ResponseError>error.json()))
                )
            )
        );
}

因此，当引发 http 错误时：

1. 已捕获但再次引发返回 Observable.throw 处理 error response。
2. 在 pushed$ observable 上，也可以使用
捕获

Answer 1

由于您在 this.service.push() 流中重新抛出错误，为了不破坏点击流，您必须在内部 observable 中包含并捕获错误

let saveClickPush$ = Observable
    .fromEvent(this.saveButton.nativeElement, 'click')
    .pipe(
        switchMap(() => this.service.push(this.user).pipe(catchError(e=>of(e))),
        share()
    );