将应用程序更新到 Angular 7 后如何更改 HttpClient 代码

Question

我在我的应用程序中将 Angular 更新到版本 7，我必须在更新后稍微更改我的代码，但我不知道该怎么做。

这是要更改的代码示例（在以前版本的 Angular 中）：

get(): Observable<MyResponseClass | null> {
    let url_ = some_url;

    let options_: any = {
        method: "get",
        headers: new Headers({
            "Content-Type": "application/json",
            "Accept": "application/json"
        })
    };

    return this.http.request(url_, options_).flatMap((response_: any) => {
        return this.getResponse(response_);
    }).catch((response_: any) => {
        if (response_ instanceof Response) {
            try {
                return this.getResponse(<any>response_);
            } catch (e) {
                return <Observable<MyResponseClass | null>><any>Observable.throw(e);
            }
        } else
            return <Observable<MyResponseClass | null>><any>Observable.throw(response_);
    });
}

对于这个问题，getResponse 和 MyResponseClass 是什么无关紧要，所以我将跳过解释。

好的，因此第一步是将 .flatMap 更改为 .pipe() 和 map() ：

Observable

因此，在此更改之后，我的代码如下所示：

return this.http.request(url_, options_).pipe(map((response_: any) => { 
            return this.getResponse(response_); })
        ).catch((response_: any) => {
            if (response_ instanceof Response) {
                try {
                    return this.getResponse(<any>response_);
                } catch (e) {
                    return <Observable<MyResponseClass | null>><any>Observable.throw(e);
                }
            } else
                return <Observable<MyResponseClass | null>><any>Observable.throw(response_);
        });

现在我遇到了这样的错误：

“Observable>”类型上不存在属性“catch”。

这里我遇到了问题，因为我真的不知道我应该如何改变它。我仍在寻找谷歌和堆栈溢出的一些信息，但还没有成功。可能我对这方面的了解不够。

你会帮我解决这个问题吗？

Answer 1

您的RxJS 很可能已从 v5.x 更新到 v6.x。因此，您需要重构涉及RxJS 的代码。

这里是更新指南：

https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md

Answer 2

Aa per rxjs V6 Update Guide chaining operators has been replaced by piping 也 catch 更改为 catchError 所以你的最终代码应该是

  return this.http.request(url_, options_).pipe(map((response_: any) => { 
                return this.getResponse(response_); }),
              catchError((response_: any) => {
                if (response_ instanceof Response) {
                    try {
                        return this.getResponse(<any>response_);
                    } catch (e) {
                        return <Observable<MyResponseClass | null>><any>Observable.throw(e);
                    }
                } else
                    return <Observable<MyResponseClass | null>><any>Observable.throw(response_);
            })
            );

或者你可以使用rxjs-compact