By Yakov Fain | Article Rating: |
|
September 19, 2017 06:06 AM EDT | Reads: |
131 |

In this article I’ll introduce the switchMap() operator. The previous articles in this series include:
1. Basic Terms
2. Operators map, filter, and reduce
3. Using Observable.create()
4. Using RxJS Subject
5. The flatMap operator
While flatMap() unwraps and merges all the data from the outer observable values, the switchMap() operator handles the data from the outer observable but cancels the inner subscription being processed if the outer observable emits a new value. The switchMap() operator is easier to explain with the help of its marble diagram shown next.
https://yakovfain.files.wordpress.com/2017/09/appd_switchmap.png?w=1520&... 1520w, https://yakovfain.files.wordpress.com/2017/09/appd_switchmap.png?w=150&h=81 150w, https://yakovfain.files.wordpress.com/2017/09/appd_switchmap.png?w=300&h... 300w, https://yakovfain.files.wordpress.com/2017/09/appd_switchmap.png?w=768&h... 768w, https://yakovfain.files.wordpress.com/2017/09/appd_switchmap.png?w=1024&... 1024w" sizes="(max-width: 760px) 100vw, 760px" />
The outer observable emits the red circle, and switchMap() emits the item from the inner observable (red diamond and square) into the output stream. The red circle was processed without any interruptions because the green circle was emitted after the inner observable finished processing.
The situation is different with the green circle. The switchMap() managed to unwrap and emit the green diamond, but the blue circle arrived before the green square was processed. So the subscription to the green inner observable was cancelled, and the green square was never emitted into the output stream. In other words, the switchMap() operator switched from processing of the green inner observable to the blue one.
The following example has two observables. The outer observable uses the function interval() and emits a sequential number every second. With the help of the take() operator we limit the emission to two values: 0 and 1. Each of these values is given to the switchMap() operator, and the inner observable emits three numbers with the interval of 400 milliseconds.
let outer$ = Rx.Observable .interval(1000) .take(2); let combined$ = outer$.switchMap((x) => { return Rx.Observable .interval(400) .take(3) .map(y => `outer ${x}: inner ${y}`) }); combined$.subscribe(result => console.log(`${result}`));
The output of this script is shown next:
outer 0: inner 0 outer 0: inner 1 outer 1: inner 0 outer 1: inner 1 outer 1: inner 2
Note that the first inner observable didn’t emit its third value 2. Here’s the timeline:
1. The outer observable emits 0 and the inner emits 0 400 milliseconds later
2. In 800 milliseconds later, the inner observable emits 1
3. In 1000 milliseconds the outer observable emits 1, and inner observable was unsubscribed
4. The three inner emissions for the second outer value went uninterrupted because it didn’t emit any new values
If you replace flatMap() with switchMap() the inner observable will emit three values for each outer value as shown below.
outer 0: inner 0 outer 0: inner 1 outer 0: inner 2 outer 1: inner 0 outer 1: inner 1 outer 1: inner 2
NOTE: To see it in CodePen, follow this link.
The chances are slim that you’ll be writing outer and inner observables emitting integers. There are various practical use cases for switchMap() in the real world projects. For example, in my Angular apps (Angular comes with RxJS) I use switchMap() with the HttpClient object to cancel pending HTTP requests. Just think of a user that types in an HTML input field (the outer observable) and the HTTP requests are being made (inner observable) on each keyup event. The circles on the diagram are the three characters that the user is typing. The inner observables are HTTP requests issued for each character. If the user entered the third character but the HTTP request for the second one is still pending, it’ll get cancelled.
TIP. The function interval() is handy if you want to invoke another function periodically based on the specified time interval. For example, myObservable.interval(1000).subscribe(n => doSometing()) will result in calling the function doSomething() every second.
If you have an account at O’Reilly’s safaribooksonline.com, you can watch my video course “RxJS Essentials” there.

Read the original blog entry...
Published September 19, 2017 Reads 131
Copyright © 2017 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
More Stories By Yakov Fain
Yakov Fain is a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay. He wrote a thousand blogs (http://yakovfain.com) and several books about software development. Yakov authored and co-authored such books as "Angular 2 Development with TypeScript", "Java 24-Hour Trainer", and "Enterprise Web Development". His Twitter tag is @yfain
Feb. 15, 2019 09:45 PM EST |
By Liz McMillan ![]() Feb. 15, 2019 09:00 PM EST Reads: 6,792 |
By Pat Romanski Feb. 15, 2019 09:00 PM EST |
By Pat Romanski Feb. 15, 2019 06:15 PM EST |
By Elizabeth White Feb. 15, 2019 05:15 PM EST |
By Roger Strukhoff Feb. 15, 2019 05:00 PM EST |
By Liz McMillan Feb. 15, 2019 04:30 PM EST |
By Zakia Bouachraoui Feb. 15, 2019 03:30 PM EST |
By Elizabeth White Feb. 15, 2019 03:30 PM EST |
By Zakia Bouachraoui ![]() Feb. 15, 2019 03:15 PM EST |
By Zakia Bouachraoui Feb. 15, 2019 03:00 PM EST |
By Yeshim Deniz Feb. 15, 2019 02:45 PM EST |
By Liz McMillan Feb. 15, 2019 01:45 PM EST |
By Zakia Bouachraoui Feb. 15, 2019 01:00 PM EST |
By Liz McMillan Feb. 15, 2019 12:30 PM EST |