如何等待 HTTP Request Response + Confirm Dialogue PopUp + Angular 8

Question

我有一个要求，我想在重定向到其他页面之前显示确认弹出消息，我正在从用户天气中获取输入，他是否想离开未保存的更改。

怎么回事！

在浏览器上确认对话框先出现然后得到不正确的 HTTP 请求响应。

应该是什么！

我想先得到 HTTP 响应，如果条件满足，然后弹出确认对话消息。

这是我在我的项目中使用的代码示例。

service.ts 文件

 async IsUnSavedRosterExistsTwo() {
    console.log('async method called');
    const url = this.util.getBaseURL() + apiURLs.IsUnSavedRosterExists;
    const rr =  await this.http.get<boolean>(url).toPromise();
    console.log(rr);
    return rr;
  }

我已经尝试了所有可能的解决方案，例如 subscribe、promise、pipe 等等，但这里没有任何效果。

component.ts

canDeactivate() {
    this.saveDownloadButton = false;
    // const IsUnSavedRosterExists = this.rosterService.IsUnSavedRosterExists();
    const IsUnSavedRosterExists = this.rosterService.IsUnSavedRosterExistsTwo();

    debugger;
    if (IsUnSavedRosterExists) {
      console.log('executing the code');
      return confirm('You have unsaved Employee Data. Do you wish to proceed without saving?');
    } else {
      this.saveDownloadButton = false;
    }
    return this.saveDownloadButton;
  }

简而言之，我想先等待http请求响应，如果条件满足再执行然后弹出确认对话框，否则重定向到其他页面。

如果我的问题不清楚，请告诉我。

Answer 1

您必须将 canDeactivate() 函数转换为 async 函数，然后您可以 await 用于 this.rosterService.IsUnSavedRosterExistsTwo() 函数在进一步处理之前解析。请看下面的代码：

async canDeactivate() {
    this.saveDownloadButton = false;
    const IsUnSavedRosterExists = await this.rosterService.IsUnSavedRosterExistsTwo();

    debugger;
    if (IsUnSavedRosterExists) {
      console.log('executing the code');
      return confirm('You have unsaved Employee Data. Do you wish to proceed without saving?');
    } else {
      this.saveDownloadButton = false;
    }
    return this.saveDownloadButton;
  }

如何等待 HTTP Request Response + Confirm Dialogue PopUp + Angular 8

How to wait for HTTP Request Response + Confirm Dialogue PopUp + Angular 8

httprequest

async-await

angular

angular8