Angular 8 个 http 补丁成功完成但第一次没有提供正确的响应

Question

我在 Angular 8:

的服务函数中有一个 http 补丁调用

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

此服务函数被组件调用：

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

this.returnStr 打印在 html.

的顶部

所以当第一次点击“保存”按钮时会发生什么—— 在控制台中：

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

此后，在控制台中：

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

所以 http.patch 工作正常，我唯一关心的是 this.returnStr 的值，它显示在 html 页面上。我怎样才能做到即使在第一次函数调用时，this.returnStr 也是“成功更新响应”，而不是空字符串？或者，为什么在第一次调用后它仍然是一个空字符串？同样的模式发生在错误的情况下——this.returnStr 在第一次函数调用和错误 return 上不是“更新失败”，即使它应该是。

谢谢

Answer 1

http.patch 是一个异步调用。如果您 return 来自 updateResponse 方法的字符串而不等待补丁调用完成，那么您很可能会看到这种行为。

您应该 return 可以从 updateResponse

中观察到

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

修改组件方法如

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

还有另一种使用管道和映射运算符的方法，您可以在其中 return 来自 updateResponse 函数的所需字符串。

Answer 2

Nikhil 上面的回答完全正确。谢谢你。我将服务上的 updateResponse 函数更新为以下内容：

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

Angular 8 个 http 补丁成功完成但第一次没有提供正确的响应

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

angular

http.client