Question

我正在使用Angular 5构建一些应用程序（是的，不止一个）。我试图遵循所有的Angular dos而不是

但我无法理解一些事情

1）这之间的差异......

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

......还有这个

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

        })
    }

......还是这个？

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＆＃39;最佳做法＆＃39;是使用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

问题的答案是，如果你在另一边有一个“终结”操作员它不起作用，那么对我有用的是：

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

Angular5 http最佳做法

2 个答案: