Reputation: 326
I'm trying to change my current code, of calling an observable in another observable code by using merge map
This code does work but I know it's bad practice so I'm trying to refactor it
this._headerRefresh$.pipe(debounceTime(this.debounceTime)).subscribe(data => {
this._outputProvider
.getData(this.to.url, this.to.body ? this.to.body : undefined)
.pipe(
debounceTime(this.debounceTime),
)
.subscribe(res => {
this.setstuff(res);
});
});
I tried to do it this way, but it not quite calling the this.setstuff(res)
this._headerRefresh$
.pipe(
debounceTime(this.debounceTime),
mergeMapTo(
this._outputProvider
.getData(this.to.url, this.to.body ? this.to.body : undefined)
),
)
.subscribe(res => {
console.log(res);
this.setstuff(res);
});
Is there anything that I missed?
Upvotes: 0
Views: 151
Reputation: 29315
if this.to.url
and this.to.body
are dynamic, you can't use mergeMapTo
... you have to use mergeMap
so they can be re evaluated on each emission, rather than just once when the stream is built:
mergeMap(() =>
this._outputProvider
.getData(this.to.url, this.to.body ? this.to.body : undefined)
),
you also may really want switchMap
or exhaustMap
instead of mergeMap
... the behaviors are slightly different.
with mergeMap
, every emission of the outter will trigger the inner, and all inners will emit till they complete. they will arrive in the order they arrive, not in the order they were triggered by the outter. so this could result in unneeded http calls in the best case, or getting stale data in the worst case.
with switchMap
, new emissions will cause prior inner observables that are still active to cancel, and it will switch to the new call.
exhaustMap
is sort of the opposite, it will ignore outter emissions while any inner is active. it's rarely used, but a refresh signal is the classic use case since you usually don't want to restart your refresh or trigger more while a refresh is already in flight.
Upvotes: 1