angular - 我如何等待我在服务中的方法的结果？

我的服务中有这个方法。

get trucks() {
    if (!this.cache$) {
      this.cache$ = this.requestAvailableTrucks().pipe(
        shareReplay(CACHE_SIZE)
      );
    }
    return this.cache$;
  }

  private requestAvailableTrucks() : Observable<Array<any>> {
    return this.http.get<any>(API_ENDPOINT_TRUCKS).pipe(
      map(response => response.value)
    );
  }

在我的应用组件中，我需要将我的属性初始化为 requestAvailableTrucks 调用的结果。然后我需要根据后端返回的结果做一些逻辑处理。但问题是，我不知道如何等待这个方法。

当我尝试时

ngOnInit() {
   this.locations = this.truckService.trucks;
    ... The other logic ...
}

另一个逻辑不会等待我服务中的方法结束。

唯一可以做的就是使用 subscribe 的方法，并把代码放在那里，但我需要在我的服务中编写逻辑，并像这样从我的 ts 文件中调用它

答案＃1

你可以简单地使用 subscribe，这样它就会等待响应。

    ngOnInit() {
       this.truckService.trucks.subscribe(trucks => {
          this.locations = trucks;
       });
    }

答案＃2

如果你想使用 await，一个简单的方法是将 observable 转换为 promise。

async ngOnInit() {
  this.trucks = await this.truckService.trucks.toPromise();
  // other logics
}

你实际上可以将每个可观察的 API 调用转换为 Promise，那么你就可以忘记流的一切。只需以普通的 Promise 方式思考即可。

对于一种更具反应性的方法：

1. 对于这个服务，我认为你不需要把逻辑封装到一个 get 方法中：

class TruckService {
  trucks$ = this.requestAvailableTrucks().pipe(
    shareReplay(CACHE_SIZE)
  );

  requestAvailableTrucks() {...}
}

2. 然后你就可以在组件中调用它，并利用 async 管道。代码会像这样：

tracks$ = this.truckService.tracks$;
ngOnInit() {....}

// TEMPLATE
{{tracks$ | async}}