Use RxJS switchMap to Map and Flatten Higher Order Observables

André Staltz
InstructorAndré Staltz

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

In this lesson, we will learn about switchMap, a shortcut for mapping to a higher order RxJS Observable, then flattening with switch.

We will also see a practical example with network requests that would be used in the real world.

HaveF
HaveF
~ 5 years ago

Very interesting when click twice, it will cancel the first fetch process. But how does it happy exactly? fetch normally does not have cancel method( javascript - How do I cancel an HTTP fetch() request? - Stack Overflow ), and promise's cancel method is just implemented in some library like bluebird, so how it happens? Thanks for your video, Andre!

André Staltz
André Staltzinstructor
~ 5 years ago

Hi HaveF. You are right that Promises have no cancellation mechanisms. When we use them in observables, their results would simply be ignored on unsubscribe, not actually cancelled. For this reason, RxJS also has its own ajax methods that internally use XMLHttpRequest, to support cancellation. We use them like Observable.ajax('http://jsonplaceholder.typicode.com/users/1') which returns an observable of response objects.

HaveF
HaveF
~ 5 years ago

Thanks for your explanation :+1:

Viktor Soroka
Viktor Soroka
~ 4 years ago

Does switchMap have some queue? I mean when there are many instant clicks - as a result only one network request was sent.