In this lecture, we were going to learn an alternative flattening operator called Switch Map.
It performs a similar task to the Merge Map operator Einar Observables are automatically subscribed
by this operator.
Values emitted by the inner observable are pushed as the output.
The behaviors between the two operators are similar.
Their differences come from how they manage inner observables.
The Merge Map operator will not limit the number of active inner observables.
On the other hand, the Switch Map operator will limit the number of active inner observables to want.
If a new value is pushed into the pipeline, a new observable will be created.
The Switch Map operator will realize there's already an active observable.
The previous observable will be completed.
The new observable will become active.
Values emitted by the new observable are pushed from the operator.
Previous observables will have their values ignored if they attempt to emit values.
The Switch Map operator is considered one of the safest flattening operators.
Completing an observable is a shared responsibility between the operator and us.
We are still responsible for completing the last act of inner observable.
Overall, the Switch Map operator is great for managing one active subscription at a time.
Let's try using this operator at the top of the file.
Replace the Merge Map operator with the Switch Map operator in the import statement.
Next, we will update the pipe function to use the Switch Map operator.
The arguments for the Switch Map operator are the same as the Merge Map operator.
We don't need to perform many changes to our code.
Let's verify if the inner observable gets completed by updating the tap operator.
As a reminder, the tap operator can accept an object with observer like functions.
Let's pass in an object with the complete function.
This function should log a message to indicate the inner observable has been completed.
Lastly, we will move the tap operator after the take operator.
Let's press the button to jump start the interval.
The interval should limit five values before being completed.
That's perfect.
We've got the same behavior as last time.
The message from the complete function has been logged to this time.
Let's press the button twice.
The first observable hasn't finished emitting five values.
Instead, the previous observable will be completed after completing the first observable.
The second observable will begin emitting values.
The Switch Map operator is perfect for maintaining a single active observable.
One realistic scenario for this operator is to handle requests.
If you're creating an app that constantly makes requests, managing those requests is critical.
If a request overlaps with another request, it could cause unexpected behavior.
Let's look at an example.
Let's use the Ajax object to perform a request.
Replace the interval operator with the Ajax Dot.
Get JSON function.
The URL for the request will be a URL from the JSON placeholder service.
Any URL will deal.
Next, in the developer tools, let's switch over to the network panel.
The network panel will allow us to inspect requests performed by our application.
If we press the button, the request successfully runs.
But what if we pressed the button twice before testing a duplicate request?
We should slow down, not internet.
This feature can be difficult to test with fast internet.
Chrome offers throttling to slow down a connection.
Lets set throttling to slow 3G.
Next, double click the button.
As you can see, the first request was cancelled.
It's undesirable behavior.
If we had two requests to the same resource, we might get mixed results.
We should always cancel a previous request to prevent conflicting results.
The Switch Map operator is perfect for this type of scenario in the next lecture.
We are going to continue learning about flattening operators.