Is there a way to simultaneously call two APIs and then immediately call a third one using RXJS?

Question

Is there a way to simultaneously call two APIs and then immediately call a third one using RXJS?

I am looking to optimize the process of making API calls by running two in parallel and then a third immediately after both have completed. I have successfully implemented parallel API calls using mergeMap and consecutive calls using concatMap, but now I want to combine the two methods.

//Call API1 and API2 in Parallel
// from([apiCall(1), apiCall(2)]).pipe(
//   mergeMap(e=>e)
// ).subscribe(x => console.log(x));

//Call API1 and API2 consecutively
// from([apiCall(1), apiCall(2)]).pipe(
//   concatMap(e=>e)
// ).subscribe(x => console.log(x));

//Call API1 and API2 in Parallel and API 3 right after both finishes
from([apiCall(1), apiCall(2), apiCall(3)]).pipe(
  // ????
).subscribe(x => console.log(x));

Any suggestions on how to achieve this?

Check out the Stackblitz playground for experimentation: https://stackblitz.com/edit/playground-rxjs-263xwk

typescript rxjs

Answer 1

Answer №1

Implementing forkJoin allows for making parallel requests.

Using forkJoin to execute multiple API calls at once is a great way to improve performance and efficiency in your application.
Here's an example:
forkJoin([apiCall(1), apiCall(2)]).pipe(
 concatMap((response) => apiCall(3).pipe(
  map((res) => [...response, res])
 ))
).subscribe((response) => {
 response[0]; // result from apiCall(1)
 response[1]; // result from apiCall(2)
 response[2]; // result from apiCall(3)
})

Answer 2

Implementing forkJoin allows for making parallel requests.

Using forkJoin to execute multiple API calls at once is a great way to improve performance and efficiency in your application.
Here's an example:
forkJoin([apiCall(1), apiCall(2)]).pipe(
 concatMap((response) => apiCall(3).pipe(
  map((res) => [...response, res])
 ))
).subscribe((response) => {
 response[0]; // result from apiCall(1)
 response[1]; // result from apiCall(2)
 response[2]; // result from apiCall(3)
})

Is there a way to simultaneously call two APIs and then immediately call a third one using RXJS?

Answer №1

Similar questions

Upon the second click, the addEventListener function is triggered

Getting the version from package.json in Next.js can be easily achieved by accessing the `version

Exporting declarations and different export types within a TypeScript ambient module

Combining results from multiple subscriptions in RxJS leads to a TypeScript compiler error

Steer clear of receiving null values from asynchronous requests running in the background

TypeScript's type casting will fail if one mandatory interface property is missing while an additional property is present

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

Taking advantage of Input decorator to access several properties in Angular 2

Exploring the method to deactivate and verify a checkbox by searching within an array of values in my TypeScript file

The dynamic fusion of Typescript and Angular 2 creates a powerful

Please come back after signing up. The type 'Subscription' is lacking the specified attributes

Error encountered: The input value does not correspond to any valid input type for the specified field in Prisma -Seed

Exploring the potential of lazy loading with AngularJS 2 RC5 ngModule

Having trouble with VueJS ref not preventing the default form action on submit?

Clicking the button in Angular should trigger a series of functions to be

Eliminate the chosen and marked items from a list - Angular 2+/ Ionic 2

Performing optimized searches in Redis

Revealing the Webhook URL to Users

Understanding the data types of functions in TypeScript can be quite important for

Shuffle and Place indented list