Angular5 http最佳实践

Question

我正在用角5构建一些应用程序(是的，不止一个)。

但我不能理解一些事情

1)这两者之间的区别.

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

...and this

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

如果无论如何，我必须使用映射方法来转换为输入用户(或者我没有？)

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

        })
    }

...or这个？

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

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

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

Answer 2

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

这之间的区别..。 如果无论如何，我必须使用map方法进行强制转换以键入User。

泛型方法的要点是泛型参数类型在内部某个地方使用。在这里，它影响到可观察到的类型：

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

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