Best practices for handling HTTP requests in Angular 5

Question

Best practices for handling HTTP requests in Angular 5

I'm currently developing multiple applications using Angular 5. My aim is to adhere to all the dos and don'ts of Angular.

However, I'm facing some confusion regarding a few things.

1) What is the difference between this...

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

...and this?

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

If I still have to use the map method to convert it to type User (or maybe not?).

2) In a service, would it be preferable 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);
    }
}

angular rest typescript observable angular5

Answer 1

Answer №1

It is considered a 'best practice' to utilize Angular 4's HttpClient over Angular 2's Http. The code provided by the original poster appears to be using HttpClient, not Http.

Here's the difference...

If I have to use the map method to cast to type User regardless.

The essence of a generic method lies in its ability to internally apply the generic parameter type. This, in turn, affects the type of observable:

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

This distinction is clearly outlined in the HttpClient API; where get(...) returns Observable<any> and get<T>(...) returns Observable<T>.

In a service scenario, it would be more beneficial to follow this approach...

However, none of the above options showcase best practices. Utilizing

new Observable(observable => { ... })

represents an antipattern when constructing observables, akin to promise constructor antipatterns. An improved implementation could be:

   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

It is considered a 'best practice' to utilize Angular 4's HttpClient over Angular 2's Http. The code provided by the original poster appears to be using HttpClient, not Http.

Here's the difference...

If I have to use the map method to cast to type User regardless.

The essence of a generic method lies in its ability to internally apply the generic parameter type. This, in turn, affects the type of observable:

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

This distinction is clearly outlined in the HttpClient API; where get(...) returns Observable<any> and get<T>(...) returns Observable<T>.

In a service scenario, it would be more beneficial to follow this approach...

However, none of the above options showcase best practices. Utilizing

new Observable(observable => { ... })

represents an antipattern when constructing observables, akin to promise constructor antipatterns. An improved implementation could be:

   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 3

Answer №2

One issue with Estus' solution is that it may not function properly when there is a "Finally" operator on the other side. After some trial and error, I found a workaround that worked for my situation:

retrieveUserData(): 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

updateUserData():void{
        this._progressDialog.openProgress();
        this._loggedUser.retrieveUserData()["finally"](() => {
             this._progressDialog.closeProgress();
        }).subscribe(data => {
            this.user = data;
            this._router.navigate(['/home']);
            this._ubiFunctions.showSnackBar({
                message: "User loaded successfully"
             });
    });
}

Answer 4

One issue with Estus' solution is that it may not function properly when there is a "Finally" operator on the other side. After some trial and error, I found a workaround that worked for my situation:

retrieveUserData(): 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

updateUserData():void{
        this._progressDialog.openProgress();
        this._loggedUser.retrieveUserData()["finally"](() => {
             this._progressDialog.closeProgress();
        }).subscribe(data => {
            this.user = data;
            this._router.navigate(['/home']);
            this._ubiFunctions.showSnackBar({
                message: "User loaded successfully"
             });
    });
}

Best practices for handling HTTP requests in Angular 5

Answer №1

Answer №2

Similar questions

Implementing Asynchronous Custom Validators in Angular 4

Angular: Check the validity of a date entered by the user depending on the value selected in another date input

The error message "Property 'value' is not present on type 'EventTarget & HTMLSelectElement'" indicates that the 'value' property is not recognized on the Event

Facing issues with Angular 13 migration: Schema validation encountered errors stating that the data path "/error" needs to be a string

Troubleshooting CORS problem: Angular 2 and AspNetCore WebApi encounter error with preflight response having invalid HTTP status code 401

ag-grid provides unique filter options for custom date filtering in Angular 2

The Typescript Module augmentation seems to be malfunctioning as it is throwing an error stating that the property 'main' is not found on the type 'PaletteColorOptions'

Troubleshooting: Angular universal 7 unable to initiate HTTP requests

What is the best way to convert Observable<Observable<{...}>[ ]> to Observable<{...}[ ]>?

How to selectively make properties optional in Typescript conditions

Enhance your TypeScript skills by leveraging types on the call() method in redux-saga

When attempting to access Angular routes directly through a browser, they are not discoverable

Node C++ Addon Typescript declaration file

The type 'Observable<boolean>' cannot be assigned to type 'Observable<UserRegistration>'

Angular synchronous observables are designed to provide real-time data

TS2339: The attribute 'size' is not present on the 'string' data type

Angular 4's OrderBy Directive for Sorting Results

Creating mock objects with Jest

What is the best method for implementing Datepicker translations in Angular?

Establish a connection between two ionic and angular applications using a node server