Angular 8 rxjs 6 如何在服务中等待订阅结果答案

【问题标题】：Angular8 rxjs6 how to wait for results of subscribe in a serviceAngular 8 rxjs 6 如何在服务中等待订阅结果
【发布时间】：2019-07-12 17:03:04
【问题描述】：

我正在 Angular8 和 rxjs6 中构建一个应用程序。我正在努力将逻辑从一个大型组件中分离出来，形成一项服务。

我正在使用 combineLatest 函数来获取多个 observables 的结果。然后在 combineLatest subscribe(=>{}) 的主体内部，使用结果数据更新多个 BehaviorSubject。

我遇到的问题是，我需要确保这些 BehaviorSubjects 先获得最新数据，然后再转到组件中的下一个语句。

combineLatest 代码在组件主体中运行良好，因为我可以将其余逻辑放在订阅主体中。但是，我想将 combineLatest 逻辑移动到服务中，因此我需要能够等待 subscribe() 内部的逻辑完成，然后再移动到组件中的下一个语句。

其他类似的问题建议使用 map() 或返回 observable of()。然而，这些解决方案似乎都不起作用。

我正在尝试将 combineLatest 周围的包装函数作为可观察对象返回，然后在组件内部订阅它。但是它不能正常工作。

服务

import { Observable, BehaviorSubject, combineLatest, throwError } from 'rxjs';

  // Create a BehaviorSubject to track and share updates to People Options
  peopleOptions: any = {};
  peopleOptionsResponse = new BehaviorSubject(this.peopleOptions);
  peopleOptionsObservable = this.peopleOptionsResponse.asObservable();

  // Create a BehaviorSubject to track and share updates to Projects Options
  projectsOptions: any = {};
  projectsOptionsResponse = new BehaviorSubject(this.projectsOptions);
  projectsOptionsObservable = this.projectsOptionsResponse.asObservable();

  getSharedOptions(): Observable<any> {

    // Combine results of multiple observables
    return combineLatest([
      // Get current value of Record Detail subject
      this.getProjects().pipe(catchError(err => {
        console.error(`getProjects failed ${err}`);
        return throwError(err);
      })),
      this.getPeople().pipe(catchError(err => {
        console.error(`getPeople failed ${err}`);
        return throwError(err);
      }))
    ]).subscribe(results => {

      // Get projects select options
      let projectsOptions = results[0];
      // Update current value of Projects Options behavior subject to share with subscribers
this.projectsOptionsResponse.next(projectsOptions);

/* The logic in the component that uses the behavior subjects' data should execute after this is complete only */
        });
      }

组件

this.exampleService.getSharedOptions().subscribe(result => {
/* Component logic that uses the current data in the behavior subjects which were updated in the service's getSharedOptions combineLatest subscribe body */
});

错误信息：

this.exampleService.getSharedOptions(...).subscribe is not a function

【问题讨论】：

标签： angular rxjs observable

【解决方案1】：

this.exampleService.getSharedOptions(...).subscribe 不是函数

这是因为 getSharedOptions 没有返回 Observable，而是返回了 Subscription 实例。

要解决此问题，让我们更改您的 getShareOptions() 方法，如下所示：

getSharedOptions(): Observable<any> {

// Combine results of multiple observables
return combineLatest([
  // Get current value of Record Detail subject
  this.getProjects().pipe(catchError(err => {
    console.error(`getProjects failed ${err}`);
    return throwError(err);
  })),
  this.getPeople().pipe(catchError(err => {
    console.error(`getPeople failed ${err}`);
    return throwError(err);
  }))
]).pipe(
 tap(results => {
  // Get projects select options
  let projectsOptions = results[0];
  this.projectsOptionsResponse.next(projectsOptions);
 })
);

然后在组件中-

this.exampleService.getSharedOptions().subscribe(result => {
/* Component logic that uses the current data in the behavior subjects which were updated in the service's getSharedOptions combineLatest subscribe body */
});

【讨论】：