switchMap in RxJS

As the name suggest, the SwitchMap operator of rxjs is used to switch between emission. It switches from one observable to the other observable by cancelling the previous observable and switches to the new observable.

In this example, we shall see how to switch between different api call.

Lets create an angular application using the angular cli command.

ng new switchmap-tutorial

Lets create a service to make http api call. Enter the following angular cli command to create a service.

ng g s services/http

Now open the file and modify the code as below.

1

import { Injectable } from '@angular/core';

2

import { HttpClient} from '@angular/common/http';

3

import { Observable} from 'rxjs';

4

​

5

@Injectable({

6

  providedIn: 'root'

7

})

8

export class HttpService {

9

​

10

  constructor(private http: HttpClient) {

11

  }

12

​

13

  getCall(url: string): Observable<any> {

14

    return this.http.get(url);

15

  }

16

}

17

​

Now create a service using the below angular cli command.

ng g s services/rxjs

This will create us a service in the services folder. Now open the rxjs.service.ts file and add the following code.

1

import { Injectable } from '@angular/core';

2

import { from } from 'rxjs';

3

import { switchMap} from 'rxjs/operators';

4

import { HttpService } from '../services/http.service';

5

@Injectable({

6

  providedIn: 'root'

7

})

8

export class RxjsService {

9

​

10

  domainUrl = 'https://reqres.in/api/users?page=';

11

  reqArray = [1, 2, 3, 4, 5];

12

  constructor(private httpService: HttpService) { }

13

​

14

  switchMapCall() {

15

    from(this.reqArray).pipe(

16

      switchMap(id => this.httpService.getCall(this.domainUrl + id))

17

    ).subscribe((value) => {

18

      console.log(value);

19

    });

20

  }

21

}

22

​

Here we have create a variable domainUrl to hold base url and reqArrayvariable to hold the array of integers to make api call by appending to the above url.

We create a function with the name switchMapCall and inside the function we use the from rxjs operator which is used to convert an array to an observable. Here we give the reqArray array variable as parameter to the from operator, which will be piped and given to the switchMap operator one by one.

The switchMap operator gets the integers in the array one by one in the idparameter and then it appends the id to the domainUrl and makes an api call. But before the api call returns the result the next integer will be piped and passed to the switchMap, which now cancels the previous api call and forms new url with 2 as id value and makes api. In the meantime, the value 3is passed to the id parameter and the previous api call will be cancelled. Similar thing will happen continously and only the final api call with id value of '5' will be successful.

Open the app.component.ts file and modify the code as below.

1

import { Component, OnInit } from '@angular/core';

2

import { RxjsService } from './services/rxjs.service';

3

​

4

@Component({

5

  selector: 'app-root',

6

  templateUrl: './app.component.html',

7

  styleUrls: ['./app.component.css'],

8

})

9

export class AppComponent implements OnInit {

10

​

11

  constructor(private rxjsService: RxjsService) {

12

  }

13

14

  ngOnInit(): void {

15

    this.rxjsService.switchMapCall();

16

  }

17

}

18

​

Now run your application and press the F12 key to open the debugger option and select the networks tab and check out.

You will notice only the final api call will be successful and the rest of the calls gets cancelled.

What if suppose you want to call an api and use its result to make another api. Some of them will come up with the solution of subscribing inside another subscribe function. Thats not a good practise to work with. Lets see how to use switchMap to solve the problem.

Open the rxjs.service.ts file and add modify the code as below.

1

import { Injectable } from '@angular/core';

2

import { from, throwError } from 'rxjs';

3

import { switchMap, catchError } from 'rxjs/operators';

4

import { HttpService } from '../services/http.service';

5

@Injectable({

6

  providedIn: 'root'

7

})

8

export class RxjsService {

9

​

10

  domainUrl = 'https://reqres.in/api/users?page=';

11

  reqArray = [1, 2, 3, 4, 5];

12

  constructor(private httpService: HttpService) { }

13

​

14

  switchMapCall() {

15

    from(this.reqArray).pipe(

16

      switchMap(id => this.httpService.getCall(this.domainUrl + id))

17

    ).subscribe((value) => {

18

      console.log(value);

19

    });

20

​

21

  }

22

​

23

  syncSwitchMapCall() {

24

    this.httpService.getCall(this.domainUrl + '1').pipe(

25

      switchMap((result1) => {

26

        console.log(result1);

27

        // Can process something with the result obtained in result1.

28

        return this.httpService.getCall(this.domainUrl + '2');

29

      }),

30

      switchMap((result2) => {

31

        console.log(result2);

32

        // Can process something with the result obtained in result2.

33

        return this.httpService.getCall(this.domainUrl + '3');

34

      }),

35

      catchError((error) => {

36

        return throwError(error);

37

      })

38

    ).subscribe((result3) => {

39

      // Finally, result will be returned only for 3rd api call.

40

      console.log(result3);

41

    }, (error) => {

42

      console.log(`Error occured`, error);

43

    });

44

  }

45

}

46

​

Here we have added the additional function with the name syncSwitchMapCall. This function will call a url initially and pipes the result and gives it to a switchMap operator. This operator will get the result and logs it to the console and makes the second call and returns the observable to the second switchMap operator. Now it holds the result of the second api call. If we need to get the value from it we can get it from 'result2' variable. Now the second switchMap calls the third api call and returns the observable.

This observable will be subscribed and the final result will be logged to the console. If any error occurs, it will be catched by the catchError and it throws the error. The error will be caught by the second callback function of subscribe function.

Now open the app.component.ts file and instead of calling switchMapCallfunction call the syncSwitchMapCall function.

1

import { Component, OnInit } from '@angular/core';

2

import { RxjsService } from './services/rxjs.service';

3

​

4

@Component({

5

  selector: 'app-root',

6

  templateUrl: './app.component.html',

7

  styleUrls: ['./app.component.css'],

8

})

9

export class AppComponent implements OnInit {

10

​

11

  constructor(private rxjsService: RxjsService) {

12

  }

13

14

  ngOnInit(): void {

15

    this.rxjsService.syncSwitchMapCall();

16

  }

17

}

18

​

Run your application and press F12 and check the Console and Network tab. It looks as below.