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

Avoiding redundant requests with the same parameters in Angular/NGRX

Querying Cloud Firestore with User ID

Testing in Jasmine: Verifying if ngModelChange triggers the function or not

How can we effectively divide NGXS state into manageable sections while still allowing them to interact seamlessly with one another?

Building a dropdown menu component in react native

What could be causing my items to appear twice and as blank elements?

Validate an object to check for null or empty fields, including arrays, using Javascript

Is it feasible to incorporate a method into a prototype and ensure that 'this' is associated with the appropriate type in TypeScript?

Sending binary information from a .net core web api to a typescript application

Tips for synchronizing the value of one field in a reactive form with changes in another field

The type 'MenuOptions[]' cannot be assigned to type 'empty[]'

React - Ensure useEffect is triggered only after state update

The implementation of combineSlices in reduxjs/[email protected] is an essential feature for managing

Check out the uploaded file preview on React Native Expo!

Error: No 'map' property found in 'TwitterserviceService' type

NestJS does not recognize TypeORM .env configuration in production build

Exploring ways to incorporate the context value into my component's functionality

Looking for a button that can be toggled on and off depending on the input fields

Is there a user-friendly interface in Typescript for basic dictionaries?

I am eager to perform DOM manipulation similar to jQuery but within the context of Angular 6