Angular5 http最佳做法

Question

我正在使用Angular 5构建一些应用程序（是的，一个以上）。我正在尝试遵循Angular的所有原则

但是我看不懂几件事

1）之间的区别...

this._http.get<User>(this._ubiRest.servicesUrls.getUser)

...和这个

this._http.get(this._ubiRest.servicesUrls.getUser)

无论如何，如果我必须使用map方法来强制转换为User类型（或者我可能不是？）

2）在服务中这样做会更好...

getUserData(): Observable<User> {

        return new Observable((observable) => {

            if (!!this._loggedUser) {
                observable.next(this._loggedUser);
                observable.complete();
            }
            else {
                this._http.get(this._ubiRest.servicesUrls.getUser)
                    .map(this._extractData)
                    .subscribe(user => {
                        this._loggedUser = user;
                        observable.next(user);
                        observable.complete();
                    }, this._handleError);
            }

        })
    }

...或这个？

getUserDataX(): Observable<User> {
    if (!!this._loggedUser) {
        return new Observable(observable => {
            observable.next(this._loggedUser);
            observable.complete();
        });
    }
    else {
        return this._http.get<User>(this._ubiRest.servicesUrls.getUser)
           .map(this._extractData)
           .catch(this._handleError);
    }
}

Answer 1

最佳实践是使用Angular 4 HttpClient而不是Angular 2 Http 。 OP中的代码看起来像是HttpClient ，而不是Http 。

两者之间的区别...

无论如何，我必须使用map方法强制转换为User类型

泛型方法的要点是，泛型参数类型在内部某处使用。 这会影响可观察的类型：

this._http.get<User>(this._ubiRest.servicesUrls.getUser)
.map(user => { /* user has User type */ })

在HttpClient API中可以清楚地看到这一点； get(...)返回Observable<any>而get<T>(...)返回Observable<T> 。

在服务中这样做会更好...

以上都不是。 new Observable(observable => { ... })是可观察的构造函数反模式，是诺言的构造函数反模式。 它是：

   if (!!this._loggedUser) {
        return Observable.of(this._loggedUser);
    }
    else {
        return this._http.get<User>(this._ubiRest.servicesUrls.getUser)
       .map(this._extractData)
       .catch(this._handleError);
    }

Answer 2

estus答案的问题在于，如果另一端有“ Finally”运算符，则该功能将不起作用，因此对我有用的是：

getUserData(): Observable<User> {
      return new Observable(observable => {
            if (!!this._loggedUser) {
                observable.next(this._loggedUser);
                observable.complete();
            }
            else {
                this._http.get<User>(this._ubiRest.servicesUrls.getUser)
                    .retry(2)
                    .map(this._mapUserResponse)
                    .subscribe(x => {
                        console.log("getUserData", x);
                        observable.next(x);
                        observable.complete();
                    }, error => {
                        console.warn("LoggedUserService error: ", error);
                        this._ubiFunctions.showSnackBar({
                            message: error.statusText
                        });
                        observable.error(error);
                    })
            }
      });
}

private _mapUserResponse(rawResponse: User) {
    this._loggedUser = rawResponse;
    return this._loggedUser;
}

我-component.ts

myGetUserData():void{
        this._progressDialog.openProgress();
        this._loggedUser.getUserData()["finally"](() => {
             this._progressDialog.closeProgress();
        }).subscribe(data => {
            this.user = data;
            this._router.navigate(['/home']);
            this._ubiFunctions.showSnackBar({
                message: "Utente caricato correttamente"
             });
    });
}