How to use switchMap in RxJs Subsciption array?

Question

I want to use switchMap in my subscriptions array, I want to call invokeRequest method which triggers http requests, basically I want to cancel subscription if same http call is triggered, can anyone please help.

private subscriptions: Subscription[] = [];
this.subscriptions.push(trigger.pipe(skip(1)).subscribe((e) =>
 this.invokeRequest(callConfig, e))
);

Alisson Reinaldo Silva · Accepted Answer · 2021-05-06 14:19:42Z

1

You can use switchMap in the pipe like below:

private subscriptions: Subscription[] = [];

this.subscriptions.push(
  trigger.pipe(
    skip(1),
    switchMap((e) => this.invokeRequest(callConfig, e))
  ).subscribe(resp => {
    // do something with the `invokeRequest` response
  })
);

This brings two main benefits:

As you pointed out, when trigger emits a new value, the previous invokeRequest is cancelled (if it's still pending) and a new one is started.
When you unsubscribe() your subscriptions (e.g when the component is destroyed), if there is some request pending, it's cancelled too. The way it was before (being called within the trigger.subscribe() callback) it would not cancel the request.

answered May 6, 2021 at 14:19

Alisson Reinaldo Silva

10.8k5 gold badges75 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anton Marinenko Over a year ago

Agreed! I'd also mark the better practice for Subscription: private subscriptions: Subscription = new Subscription(); and then just use this.subscriptions.add(... in the same way. It allows you only one time unsubscribe for all of your subscriptions in OnDestroy hook.

Collectives™ on Stack Overflow

How to use switchMap in RxJs Subsciption array?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related