Difference between mergeMap vs switchMap vs concatMap vs exhaustMap-JS Tutorial-php.cn

Hi, in your interview as an Angular developer, you might be asked several questions about RxJs operators and their differences.

One of the most common questions is"What is the difference between mergeMap vs switchMap vs concatMap vs exhaustMap?"

Let's get into it and explain them in simple terms.

I will explain the difference in behavior using one simple example:

import { interval, take, tap, from } from 'rxjs'; import { switchMap, mergeMap, concatMap, exhaustMap, } from 'rxjs/operators'; const mapOperators = [ mergeMap, switchMap, concatMap, exhaustMap ]; const selectedMap = mapOperators[0]; // <- Change operator index here const clicks$ = from(['First Click', 'Second Click', 'Third Click']).pipe( tap(console.log), ); clicks$ .pipe( selectedMap((click: number) => interval(500).pipe( tap((intervalValue: number) => console.log( `${click} Value: ${intervalValue}` ) ), take(3) ) ) ) .subscribe();

Copy after login

In the code example, which you can experiment with on Stackblitz, you can see the imitation of 3 user clicks

Now, let's see what each of the operators will return

MergeMap

Difference between mergeMap vs switchMap vs concatMap vs exhaustMap

First Click Second Click Third Click First Click Value: 0 Second Click Value: 0 Third Click Value: 0 First Click Value: 1 Second Click Value: 1 Third Click Value: 1 First Click Value: 2 Second Click Value: 2 Third Click Value: 2

Copy after login

The mergeMap operator runs the emissions in parallel which is why you see

First Click Value: 0 Second Click Value: 0 Third Click Value: 0

Copy after login

with value 0

SwitchMap

Difference between mergeMap vs switchMap vs concatMap vs exhaustMap

First Click Second Click Third Click Third Click Value: 0 Third Click Value: 1 Third Click Value: 2

Copy after login

The switchMap operator will cancel the previous one after each new click, in our caseFirst Clickwill be canceled bySecond ClickandSecond Clickwill be canceled byThird Clickand as the result we will seeThird Click Values

Third Click Value: 0 Third Click Value: 1 Third Click Value: 2

Copy after login

ConcatMap

Difference between mergeMap vs switchMap vs concatMap vs exhaustMap

First Click Second Click Third Click First Click Value: 0 First Click Value: 1 First Click Value: 2 Second Click Value: 0 Second Click Value: 1 Second Click Value: 2 Third Click Value: 0 Third Click Value: 1 Third Click Value: 2

Copy after login

The concatMap operator will memorize all clicks and console.log them in the same order, in our caseFirst Click,Second Click,Third Clickas you see in the console

First Click Value: 0 First Click Value: 1 First Click Value: 2 Second Click Value: 0 Second Click Value: 1 Second Click Value: 2 Third Click Value: 0 Third Click Value: 1 Third Click Value: 2

Copy after login

ExhaustMap

Difference between mergeMap vs switchMap vs concatMap vs exhaustMap

First Click Second Click Third Click First Click Value: 0 First Click Value: 1 First Click Value: 2

Copy after login

The exhaustMap operator will block the stream untilFirst Clickis complete and in our caseSecond ClickandThird Clickwill be ignored

First Click Value: 0 First Click Value: 1 First Click Value: 2

Copy after login

Now that you understand the differences between these operators, you can imagine the consequences of choosing the wrong one

The above is the detailed content of Difference between mergeMap vs switchMap vs concatMap vs exhaustMap. For more information, please follow other related articles on the PHP Chinese website!