如何在 Angular 8 或 9 中发出同步 HTTP 请求（发出请求并等待）

有三个按钮：

单击第一个Request HTTP Data As Promise按钮获取其 HTTP 响应作为Promise.

第二Request HTTP Data As Observable按钮的响应为Observable.

这两个按钮都使用异步响应机制来获取响应。

现在我想要第三个Request HTTP Data and Wait按钮以获得同步响应。我希望它等待 http 服务返回 HTTP 响应。

怎么可能呢？这是 Stackblitz 项目的链接（请使用占位符函数getDataSynchronous定义在HttpService脚本来实现此功能）：

https://stackblitz.com/edit/angular-ivy-ukgwct?file=src%2Fapp%2f Http.service.ts https://stackblitz.com/edit/angular-ivy-ukgwct?file=src%2Fapp%2Fhttp.service.ts

export class HttpService {
  jsonFile = '../assets/products.json';

  constructor(private http: HttpClient) {}

  getDataAsPromise(): Promise<any> {
    return this.http.get(this.jsonFile)
      .toPromise()
  }

  getDataAsObservable(): Observable<any> {
    return this.http.get(this.jsonFile)
  }

  getDataSynchronous(): any {
    return []
  }

Demo https://stackblitz.com/edit/angular-ivy-rmqbhr异步函数是通过事件循环异步操作的函数，使用隐式 Promise 返回其结果。但使用异步函数的代码的语法和结构更像使用标准同步函数。 wait 运算符用于等待 Promise。它只能在异步函数内使用。

getDataSynchronous() {
    return  this.http.get(this.jsonFile).toPromise()
}

在组件中

async requestDataAndWait() {
    let httpData = await this.http.getDataSynchronous();  
    this.addMessages(httpData)  
}