How to handle multiple API requests in Angular by using mergeMap and forkJoin

In modern web development, it's common to encounter scenarios where multiple API requests need to be handled in Angular applications. To ensure efficient and maintainable code, it's crucial to implement a proper solution that avoids issues like nested subscriptions. In this tutorial, we will explore how to handle multiple API requests using the mergeMap and forkJoin operators from the Angular RxJS library.

Problem Statement: Let's try to understand the problem. When dealing with multiple API calls, relying solely on the subscribe operator can lead to nested subscriptions, which can result in unhandled Observables and Subscriptions. This can cause memory-related issues. Let's examine the typical approach that utilizes nested subscriptions:

typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-code-revisited',
  templateUrl: './code-revisited.component.html',
  styleUrls: ['./code-revisited.component.css']
})
export class CodeRevisitedComponent implements OnInit {
  todoValue: string = '';
  comment: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.retrieveDefaultData();
  }

  retrieveDefaultData(): void {
    this.http.get('https://jsonplaceholder.typicode.com/posts/1').pipe(
      map((todo: any) => todo[0])
    ).subscribe((todo: any) => {
      this.todoValue = todo;
      this.http.get(`https://jsonplaceholder.typicode.com/posts/${this.todoValue}/comments`).subscribe((comment: any) => {
        this.comment = comment;
      });
    });
  }
}

While this technique seems straightforward, it can lead to memory leaks and potential issues. Each new subscription triggers a fresh copy of the defined Observable pipeline, which consumes memory and can cause performance problems.

Using mergeMap: To overcome the drawbacks of nested subscriptions, we can leverage the mergeMap operator. It applies a transformation function to each emitted value and merges the resulting observables into a single output observable. By using mergeMap, we can flatten asynchronous operations and avoid nested subscriptions. Let's see an example:

typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, mergeMap } from 'rxjs/operators';

@Component({
  selector: 'app-code-revisited',
  templateUrl: './code-revisited.component.html',
  styleUrls: ['./code-revisited.component.css']
})
export class CodeRevisitedComponent implements OnInit {
  todoValue: string = '';
  comment: any;
  mergeMapResult: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.retrieveDefaultData();
  }

  retrieveDefaultData(): void {
    this.http.get('https://jsonplaceholder.typicode.com/posts/1').pipe(
      map((todo: any) => todo),
      mergeMap((todo: any) => this.http.get(`https://jsonplaceholder.typicode.com/posts/${todo}/comments`))
    ).subscribe((response: any) => {
      this.mergeMapResult = response;
    });
  }
}

By using mergeMap, we can avoid nested subscriptions and create more readable code. The operations are executed sequentially, resulting in cleaner code that is easier to maintain.

Utilizing forkJoin: The forkJoin operator is useful when we have multiple parallel API requests that are independent of each other and we want to wait for all of them to complete before proceeding. Instead of nested subscriptions, we can use forkJoin to simplify the handling of parallel requests. Here's an example:

typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-code-revisited',
  templateUrl: './code-revisited.component.html',
  styleUrls: ['./code-revisited.component.css']
})

export class CodeRevisitedComponent implements OnInit {
  todoValue: string = '';
  comment: any;
  firstApiResult: any;
  secondApiResult: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.retrieveDefaultData();
  }

  retrieveDefaultData(): void {
    const firstAPI = this.http.get('https://jsonplaceholder.typicode.com/posts/1');
    const secondAPI = this.http.get('https://jsonplaceholder.typicode.com/posts');

    forkJoin([firstAPI, secondAPI]).subscribe((result: any) => {
      this.firstApiResult = result[0];
      this.secondApiResult = result[1];
    });
  }
}

By using forkJoin, we simplify the handling of parallel API requests. It eliminates the need for nested subscriptions and improves code readability and maintainability.

Conclusion: By using mergeMap and forkJoin from the RxJS library, you can efficiently handle multiple API requests in Angular without resorting to nested subscriptions. This approach improves code readability, enhances maintainability, and allows for the parallel execution of asynchronous operations.

Read more :

1. what is Route Guards in Angular

2. Angular 16: Understanding Required Input Properties, Example

3. What is signals in Anglaur 16?Example

4. What is Hydration in angular 16?

5. Angular 16 & 17 — game changer or loss of identity?

6. Bind Route Info to Component Inputs - Angular 16 New Router feature

7. How to Apply SOLID Design Principles in Angular for Clean, Maintainable Code