Angular HTTP calls: Chain execution with RxJS mergeMap

Photo by Luca Bravo on Unsplash

A common situation in developing a web application is fetching data from multiple data sources using HTTP requests. Most of the times, all of these requests are independent but what can we do when we must send a new request only if the previous request returned a successful response.

In the following examples, we will simulate some HTTP requests that will return a message after a specified number of seconds, covering 4 cases:

1. Iterative execution
2. Chain execution
3. Chain execution without error handling
4. Chain execution with error handling

To simulate a back-end endpoint, we will use:

1. Iterative execution

Let’s consider the next lines of code. We call getMessageAfterSeconds() to return a message after 3, 2 and 1 seconds and then print that message to the console.

The output in this case will be:

Hello, after 1 seconds
Hello, after 2 seconds
Hello, after 3 seconds

Even though we’ve called those methods in reverse order, HTTP calls are asynchronous and this is the correct result.

2. Chain execution

In the next case, we want to execute HTTP calls in our first specified order. We want to get the first message after 3 seconds, then after 2 seconds and finally after 1 seconds. For this, we will use RxJS operator mergeMap().

mergeMap

Projects each source value to an Observable which is merged in the output Observable.

Let’s consinder the next lines of code:

We make a call to get the first message after 3 seconds, then, when the request is complete, we print our message to the console. After that, our next call will be executed and we will wait for our message after 2 seconds and so on.

In this case, the output is:

Hello, after 3 seconds
Hello, after 2 seconds
Hello, after 1 seconds
Chain executed successfully. Good job :)

We see now that the requests were executed accordingly. But what if one request will fail?

3. Chain execution without error handling

We’ve made a small change in our code, so the second getMessageAfterSeconds() call will throw an exception.

In this case, the output will be:

Hello, after 3 seconds
ERROR Error: Not this time!

We see now that our chain has finished its execution when an error has occured. This behaviour is correct and this is what we want to happen but what if that failed request is not so important and we want to continue our execution?

4. Chain execution with error handling

In order to handle an error threw by a specific request, we can use the catchError() operator. In our previous case, the second getMessageAfterSeconds() call threw an error and our execution stopped. Using catchError(), we now can handle that error and continue our execution.

Now, the output will be:

Hello, after 3 seconds
There was an error but I fixed it!
Hello, after 1 seconds
Chain executed successfully. Good job :)

This was an overview on how you can chain multiple interdependent HTTP calls using mergeMap(). You can find the full source code here.

Follow me Medium or GitHub to read more about Angular and .NET.