RxJs map函数导致上游observable被多次调用

Posted 2021-04-06

我对RxJS有点新，并且在Observable上遇到map问题导致上游Observable被多次调用（即HTTP请求）。

我有以下示例：

https://stackblitz.com/edit/angular-rxjs-playground-uxygsb?file=app%2Fapp.component.ts

要点如下

function simulateHttp(val: any, delay:number) {
    return Observable.of(val)
        .delay(delay);
}

function timeLog(msg) {
    console.log(`${new Date().toISOString()}:  ${msg}`);   
}

const timerStream: Observable<number> = IntervalObservable
  .create(8000)
const manualRefreshStream = new Subject<any>();
const combinedTriggerStream: Observable<any> = Observable.merge(timerStream, manualRefreshStream);

const httpResultStream = combinedTriggerStream.switchMap(v => {
  return simulateHttp('http ' + v, 3000);
});
const dataStream = httpResultStream
  .map(v => `*${v}*`)
  .map(v => `#${v}#`);

基本上，只要我在map流上通过httpResult进行转换，我就会多次调用simulateHttp方法。

我google了一下，似乎share可能是解决方案，但我不够精通，无法理解在哪里放以及为什么。

答案

我设法通过执行删除多个调用

const httpResultStream = combinedTriggerStream
   .switchMap(v => simulateHttp('http ' + v, 3000))
   .share(); 

仍不确定为什么我需要这个。

此外，我发现这篇文章非常有用，即使它不属于我的问题https://blog.angular-university.io/rxjs-switchmap-operator/