Angular5 http 最佳实践

Question

我正在使用 Angular 5 构建一些应用程序(是的，不止一个)。我正在尝试遵循 Angular 的所有注意事项

但是我不明白一些事情

1) Difference between this...

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

...and this

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

如果无论如何我必须使用 ma​​p 方法来转换为 User 类型(或者我可能不需要？？)

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

“最佳实践”是使用 Angular 4 HttpClient而不是 Angular 2 Http . OP 中的代码看起来是 HttpClient , 不是 Http .

Difference between this...

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

泛型方法的要点是在内部某处使用了泛型参数类型。在这里它会影响可观察对象的类型:

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

这可以在 HttpClient API 中清楚地看到; get(...)返回 Observable<any>和 get<T>(...)返回 Observable<T> .

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

以上都不是。 new Observable(observable => { ... })是可观察的构造函数反模式，是 promise 构造函数反模式的对应物。它是:

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