1 00:00:00,090 --> 00:00:04,950 In this lecture, we were going to learn an alternative flattening operator called Switch Map. 2 00:00:05,310 --> 00:00:11,490 It performs a similar task to the Merge Map operator Einar Observables are automatically subscribed 3 00:00:11,490 --> 00:00:12,600 by this operator. 4 00:00:13,080 --> 00:00:16,980 Values emitted by the inner observable are pushed as the output. 5 00:00:17,370 --> 00:00:20,280 The behaviors between the two operators are similar. 6 00:00:20,640 --> 00:00:24,030 Their differences come from how they manage inner observables. 7 00:00:24,600 --> 00:00:29,120 The Merge Map operator will not limit the number of active inner observables. 8 00:00:29,700 --> 00:00:35,700 On the other hand, the Switch Map operator will limit the number of active inner observables to want. 9 00:00:36,120 --> 00:00:40,950 If a new value is pushed into the pipeline, a new observable will be created. 10 00:00:41,370 --> 00:00:45,930 The Switch Map operator will realize there's already an active observable. 11 00:00:46,380 --> 00:00:48,810 The previous observable will be completed. 12 00:00:49,080 --> 00:00:51,330 The new observable will become active. 13 00:00:51,960 --> 00:00:55,950 Values emitted by the new observable are pushed from the operator. 14 00:00:56,310 --> 00:01:01,350 Previous observables will have their values ignored if they attempt to emit values. 15 00:01:01,710 --> 00:01:06,330 The Switch Map operator is considered one of the safest flattening operators. 16 00:01:06,750 --> 00:01:11,640 Completing an observable is a shared responsibility between the operator and us. 17 00:01:11,970 --> 00:01:16,200 We are still responsible for completing the last act of inner observable. 18 00:01:16,470 --> 00:01:22,500 Overall, the Switch Map operator is great for managing one active subscription at a time. 19 00:01:23,590 --> 00:01:27,080 Let's try using this operator at the top of the file. 20 00:01:27,100 --> 00:01:32,860 Replace the Merge Map operator with the Switch Map operator in the import statement. 21 00:01:35,320 --> 00:01:40,170 Next, we will update the pipe function to use the Switch Map operator. 22 00:01:42,660 --> 00:01:47,670 The arguments for the Switch Map operator are the same as the Merge Map operator. 23 00:01:48,000 --> 00:01:50,880 We don't need to perform many changes to our code. 24 00:01:51,210 --> 00:01:56,700 Let's verify if the inner observable gets completed by updating the tap operator. 25 00:01:57,060 --> 00:02:02,880 As a reminder, the tap operator can accept an object with observer like functions. 26 00:02:03,210 --> 00:02:06,150 Let's pass in an object with the complete function. 27 00:02:08,699 --> 00:02:13,740 This function should log a message to indicate the inner observable has been completed. 28 00:02:16,320 --> 00:02:21,090 Lastly, we will move the tap operator after the take operator. 29 00:02:23,630 --> 00:02:26,180 Let's press the button to jump start the interval. 30 00:02:26,450 --> 00:02:29,960 The interval should limit five values before being completed. 31 00:02:30,290 --> 00:02:31,130 That's perfect. 32 00:02:31,400 --> 00:02:33,710 We've got the same behavior as last time. 33 00:02:34,100 --> 00:02:38,600 The message from the complete function has been logged to this time. 34 00:02:38,780 --> 00:02:40,430 Let's press the button twice. 35 00:02:40,790 --> 00:02:44,330 The first observable hasn't finished emitting five values. 36 00:02:44,600 --> 00:02:50,640 Instead, the previous observable will be completed after completing the first observable. 37 00:02:50,810 --> 00:02:53,930 The second observable will begin emitting values. 38 00:02:54,320 --> 00:02:59,480 The Switch Map operator is perfect for maintaining a single active observable. 39 00:03:00,140 --> 00:03:04,220 One realistic scenario for this operator is to handle requests. 40 00:03:04,490 --> 00:03:10,340 If you're creating an app that constantly makes requests, managing those requests is critical. 41 00:03:10,670 --> 00:03:15,770 If a request overlaps with another request, it could cause unexpected behavior. 42 00:03:16,040 --> 00:03:17,630 Let's look at an example. 43 00:03:18,260 --> 00:03:21,620 Let's use the Ajax object to perform a request. 44 00:03:21,980 --> 00:03:25,180 Replace the interval operator with the Ajax Dot. 45 00:03:25,190 --> 00:03:26,630 Get JSON function. 46 00:03:29,210 --> 00:03:34,040 The URL for the request will be a URL from the JSON placeholder service. 47 00:03:34,400 --> 00:03:35,840 Any URL will deal. 48 00:03:38,370 --> 00:03:42,900 Next, in the developer tools, let's switch over to the network panel. 49 00:03:45,480 --> 00:03:50,520 The network panel will allow us to inspect requests performed by our application. 50 00:03:50,880 --> 00:03:54,330 If we press the button, the request successfully runs. 51 00:03:54,570 --> 00:03:59,160 But what if we pressed the button twice before testing a duplicate request? 52 00:03:59,400 --> 00:04:01,230 We should slow down, not internet. 53 00:04:01,620 --> 00:04:04,710 This feature can be difficult to test with fast internet. 54 00:04:05,070 --> 00:04:08,070 Chrome offers throttling to slow down a connection. 55 00:04:08,370 --> 00:04:11,310 Lets set throttling to slow 3G. 56 00:04:13,700 --> 00:04:15,470 Next, double click the button. 57 00:04:15,710 --> 00:04:18,800 As you can see, the first request was cancelled. 58 00:04:19,070 --> 00:04:20,839 It's undesirable behavior. 59 00:04:21,110 --> 00:04:25,940 If we had two requests to the same resource, we might get mixed results. 60 00:04:26,240 --> 00:04:30,920 We should always cancel a previous request to prevent conflicting results. 61 00:04:31,280 --> 00:04:36,890 The Switch Map operator is perfect for this type of scenario in the next lecture. 62 00:04:36,980 --> 00:04:40,700 We are going to continue learning about flattening operators.