Angular - 等待 HTTP 响应进行评估

Angular - Wait for HTTP Responses for evaluation

在我的 angular 应用程序中,我们有一个处理按钮,可以调用后端服务来保存问题的数据更改,并为正在读取的问题翻转标志。

我想让我的 HTTP 调用同步(等待),这样我就可以确定数据是否已成功保存。如果数据保存成功,我们将显示绿色 material 快餐栏和成功消息。如果调用失败,我们将显示一个红色 material 带有错误消息的小吃店。

最初一切都是异步订阅。我根据我遇到的一些文章做了以下内容。

const savedFacilityInfo = this.facility.updateFacilityInfo(this.savedFacilityInfo).toPromise();
      savedFacilityInfo.then((data) => {
          this.isFacilityInfoSaved = true;
          console.log(data);
      }).catch((error) => {
        console.log(error);
      })

 const updatedInfo = this.issuesService.updateInfo(this.selectedIssue.issueId, this.savedFacilityInfo).toPromise();
      updatedInfo.then((data) => {
        this.isUpdated = true;
        console.log(data);
      }).catch((error) => {
        console.log(error);
      })
    }

    if(this.isFacilityInfoSaved && this.isUpdated) {
      this.resolvedConfirmation();
    } else {
      console.log("Display Error");
      this.displayErrorConfirmation();
    }

这会 运行,但它不会等待两个 service/http 调用完成后再评估已解决或显示确认。

我是不是遗漏了什么或者有更好的方法来处理这个问题?

如果你需要等待两个请求,你最好使用 forkJoin ,它只会在两个 Observables 完成时发出。如果两个请求都成功,您将 运行 resolvedConfirmation。否则,您将 运行 displayErrorConfirmation.

forkJoin([
    this.facility.updateFacilityInfo(this.savedFacilityInfo),
    this.issuesService.updateInfo(this.selectedIssue.issueId, this.savedFacilityInfo)
])
.pipe(catchError(err => {
    this.displayErrorConfirmation();
    throw EMPTY; 
}))
.subscribe([answer1, answer2] => {
    this.resolvedConfirmation();
});