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"
             });
    });
}