从 REST API 返回值的 Angular 10 方法答案

【问题标题】：Angular 10 method that returns value from REST API从 REST API 返回值的 Angular 10 方法
【发布时间】：2021-10-08 19:42:00
【问题描述】：

问题总结：Angular 方法不会等到收到来自 REST 调用的响应后才返回值

问题描述：

我有一个端点，一旦使用它就会从数据库中返回一个日期。我打算在 Angular 中编写一个通用方法（我在提供程序服务中创建了一个方法），每次被任何组件调用时都会执行此 REST 调用并从响应中返回日期。
下面是 GET REST 调用的方法

getDateFromDb() {    
   return this.httpClient.get(this.host + "/api/get-date"); 
}

以下是提供者服务中调用 getDateFromDb() 方法并应从响应中返回日期的方法

async fetchDate() {
   await this.rest_service.getDateFromDb().subscribe((response: any) => {
     if(response)
       return response.date;
  }, error => {
      this._alert.alertError('Error occurred');
  });
}

我尝试了 async/await、promise、observables，但找不到可行的解决方案。如果实施有任何问题，请告诉我。
我也不能使用局部变量，因为这个 fetchDate() 方法在提供者服务中而不是在组件中。所以不能使用这样的东西。

async fetchDate() {
   await this.rest_service.getDateFromDb().subscribe((response: any) => {
     if(response)
       this.date = response.date; //Cant' do
  }, error => {
      this._alert.alertError('Error occurred');
  });
}

我希望能够在任何组件中调用 fetchDate() 方法并分配值。例如

this.date = this._provider_service.fetchDate(); //Inside component A

或

let obj = { //Inside component B
 foo: //some default value
 date: this._provider_service.fetchDate();
}

【问题讨论】：

标签： angular async-await angular-promise angular-httpclient angular2-observables

【解决方案1】：

我认为你把事情复杂化了。在你的组件上试试这个，

//getDateFromDb需要导入服务

getDateFromDb().subscribe((response: any) => {
    //or whatever you need. this way assignment will be made when response is received by the component
       this.date = response.date

  })

【讨论】：

这将是多余的。因为我需要这个日期在不同的组件中。
在服务中定义一个变量，每次有人需要它时检查它是否为空，如果是从数据库获取日期，存储在变量中并发送它，下次只从变量

【解决方案2】：

如果不使用 Promise，没有简单的方法可以实现这一点。

调用实际 API 的方法

getDateFromDb() {    
   return this.httpClient.get(this.host + "/api/get-date"); 
}

提供者中的方法

fetchDate(): Promise<Object> {
   return this.rest_service.getDateFromDb();
}

调用 fetchDate() 方法的其他组件必须使用 .then() 在其中编写依赖代码。

this._provider_service.fetchDate().then((data: any) => {
  if(data) {
     this.date = data;
  }
}); //Inside component A

或

foo() {
this._provider_service.fetchDate().then((data: any) => {
      if(data) {
         let obj = { //Inside component B
            foo: //some default value,
            date: data,
         }
      }
    })
}

【讨论】：