Angular 8 http patch completing succesfully but not providing correct response first time

Question

I have an http patch call in a function in a service in Angular 8:

// public returnStr: string = "";  at top of service

updateResponse(response: Response, reviewId: number): string {
    this.http.patch(`/assessing/api/reviews/update/${reviewId}`, response, this.httpOptions)
        .subscribe(() => {
            console.log("Success updating response");
            this.returnStr = "Success updating response";
        },
            response => {
                console.log("Error in response patch call: ", response);
                this.returnStr = "Failed to update";
            },
            () => {
                console.log("Patch call for response complete");
            });
    return this.returnStr;
}

This service function is called by a component:

save(response: Response): string {
        this.returnStr = this.dataservice.updateResponse(response, this.reviewId);
        console.log("this.returnStr = " + this.returnStr);
    }

this.returnStr gets printed at the top of the html.

So what happens when the "Save" button is clicked for the first time is-- In console:

this.returnStr = 
Success updating response
Patch call for response complete

Thereafter, in console:

this.returnStr = Success updating response
Success updating response
Patch call for response complete

So the http.patch works fine, my only concern is the value of this.returnStr, which gets shown on the html page. How can I make it such that even on the first function call, this.returnStr is "Success updating response", not an empty string? Or, why is it still an empty string after the first call? The same pattern happens in the case of an error -- this.returnStr is not "Failed to update" on the first function call and error return, even though it should be.

Thanks

Actually it look like your calling update response function after save button thats why it print first time empty string because your not updating string until updateResponse function called — Wajid, Feb 24 '21 at 04:07

score 2 · Accepted Answer · answered Feb 24 '21 at 02:32

http.patch is a asynchronous call. If you return the string from the updateResponse method without waiting for the patch call to complete then you are likely to see such behavior.

You should return observable from the updateResponse

updateResponse(response: Response, reviewId: number): string {
    return this.http.patch(`/assessing/api/reviews/update/${reviewId}`, response, this.httpOptions);
}

Modify component method like

 this.dataservice.updateResponse(response, this.reviewId).subscribe (() => {
            console.log("Success updating response");
            this.returnStr = "Success updating response";
        },
            response => {
                console.log("Error in response patch call: ", response);
                this.returnStr = "Failed to update";
            },
            () => {
                console.log("Patch call for response complete");
            });

There is another way to use pipe and map operator where you can return required string from the updateResponse function.

score 0 · Answer 2 · answered Feb 24 '21 at 03:26

0

Nikhil's answer above is exactly right. Thank you. I updated the updateResponse function on the service to the following:

updateResponse(response: Response, reviewId: number): Observable<boolean> {
        return this.http.patch(`/assessing/api/reviews/update/${reviewId}`, response, this.httpOptions)
            .pipe(
                map((data: string) => {
                    this.returnStr = data;
                    return true;
                }));
    }

answered Feb 24 '21 at 03:26

anvw

149
3
15

I would not recommended to store response unless the use case demands it (example: caching). You can get the response directly in the subscribe call. – Nikhil Walvekar Feb 24 '21 at 04:37

Angular 8 http patch completing succesfully but not providing correct response first time

2 Answers2