Angular5 http最佳做法

Question

I'm building some applications (yes, more than one) with Angular 5. I'm trying to follow all of Angular dos and don'ts

But I can't understand a couple things

1) Difference between this...

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

...and this

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

If anyway I have to do use the map method to cast to type User (or maybe I don't??)

2) In a service would be better to do this...

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

        })
    }

...or this?

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

A 'best practice' is to use Angular 4 HttpClient instead of Angular 2 Http . And the code in OP looks like it's HttpClient , not Http .

Difference between this...

If anyway I have to do use the map method to cast to type User

The point of generic method is that generic parameter type is used somewhere internally. Here it affects the type of observable:

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

This can be clearly seen in HttpClient API ; get(...) returns Observable<any> and get<T>(...) returns Observable<T> .

In a service would be better to do this...

None of the above. new Observable(observable => { ... }) is observable constructor antipattern, a counterpart to promise constructor antipattern. It is:

   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

The problem with estus answer is that it doesn't work if you have a "Finally" operator on the other side, so what worked for me was this:

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

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