RxJs：使用异步/等待共享一个可观察对象

Question

使用RxJs 5和Angular 4。

我想共享一个可观察对象，这样我就只发出1个Http请求，并且我还想等待调用，以便在请求时得到结果。 我有以下代码：

export class DataService {
    constructor(public http: HttpClient) {
        this.getObservable();  
    }

    public observable;

    public getObservable() {
        const url = "api/getData";
        this.observable = this.http.get(`${this.baseUrl}${url}`).share()
    }

    public async hasData(data: DataEnum) {        
        const result = await this.observable.toPromise();
        return result.filter(x => x === data).length > 0;
    }
}

但是，对hasData的多次调用导致对我们的api端点的多次调用。 我假设我已将observable设置为一个共享的observable，并且当我调用.toPromise() ，它将仅获取缓存的值并将其作为一个保证，我可以await 。

这是应该如何工作的？

Answer 1

您的代码对我来说似乎过于复杂。 我可能会做类似的事情：

private data = null;

getData():Observable<> {
  // if data is already available, return it immediately
  if (this.data) return Observable.of(this.data);

  // else, fetch from the server and cache result
  return this.http.get(url).do(data => this.data=data)
}

因此，只要您想要数据，就可以执行以下操作：

this.getData().subscribe(
  data => console.log(data);
)

为了确保您不会在数据到达之前多次调用API端点，您有几种选择。

• 研究数据解析器 -这些解析器在数据到达之前不会初始化您的组件。 在ngOnInit ，数据将同步准备就绪，因此没有多次调用服务器的风险。

• 或者，您可以隐藏视图，直到使用*ngIf="data"准备好数据为止，这样用户就不会多次单击按钮。

Answer 2

由于share工作方式， observable被重新订阅到toPromise ，从而产生新的请求。

承诺已经提供了缓存行为。 考虑到服务API中已经使用了Promise，可以将它们专用：

constructor(public http: HttpClient) {
    this.getPromise();  
}

public promise;

public getPromise() {
    const url = "api/getData";
    this.promise = this.http.get(`${this.baseUrl}${url}`).toPromise()
}

public async hasData(data: DataEnum) {        
    const result = await this.promise;
    return result.filter(x => x === data).length > 0;
}