1 00:00:00,765 --> 00:00:04,650 Let's now learn how to chain promises in order 2 00:00:04,650 --> 00:00:07,350 to also render the neighboring country, 3 00:00:07,350 --> 00:00:09,010 of the initial country 4 00:00:09,010 --> 00:00:10,460 that we give to the function. 5 00:00:12,550 --> 00:00:16,530 And actually, we already have a small chain of promises 6 00:00:16,530 --> 00:00:19,110 because of this JSON function. 7 00:00:19,110 --> 00:00:19,943 And so here, 8 00:00:19,943 --> 00:00:22,860 these two thens called and sequence 9 00:00:22,860 --> 00:00:25,860 are basically already a small chain. 10 00:00:25,860 --> 00:00:27,780 But anyway, in this lecture, 11 00:00:27,780 --> 00:00:30,770 we will now take chaining to a new level 12 00:00:30,770 --> 00:00:32,620 and actually chain together, 13 00:00:32,620 --> 00:00:35,070 two sequential Ajax calls. 14 00:00:35,070 --> 00:00:38,010 So just like before we first get data 15 00:00:38,010 --> 00:00:39,590 about the country. 16 00:00:39,590 --> 00:00:40,850 And so that's the part 17 00:00:40,850 --> 00:00:42,520 that we already have here. 18 00:00:42,520 --> 00:00:44,800 But then we also want to get the data 19 00:00:44,800 --> 00:00:46,970 about the neighboring country. 20 00:00:46,970 --> 00:00:47,970 And so again, 21 00:00:47,970 --> 00:00:51,110 the second Ajax call depends on the data 22 00:00:51,110 --> 00:00:52,670 from the first call. 23 00:00:52,670 --> 00:00:55,393 And so they need to be done in sequence. 24 00:00:56,500 --> 00:00:59,783 So let's simply modify what we already have here. 25 00:01:00,720 --> 00:01:03,330 And so the second Ajax call basically needs 26 00:01:03,330 --> 00:01:04,710 to happen here in 27 00:01:04,710 --> 00:01:07,163 this then handler. 28 00:01:08,820 --> 00:01:10,973 So as soon as we get the data, 29 00:01:12,050 --> 00:01:14,330 then we need to get the neighbor country 30 00:01:14,330 --> 00:01:17,213 and do the Ajax call for that one as well. 31 00:01:19,360 --> 00:01:23,810 So let's get the neighbor and we already know 32 00:01:23,810 --> 00:01:27,550 that it is at data zero at borders. 33 00:01:32,120 --> 00:01:34,240 And then also the first one. 34 00:01:34,240 --> 00:01:36,270 And just like before, let's say, 35 00:01:36,270 --> 00:01:37,763 if there is no neighbor, 36 00:01:39,240 --> 00:01:41,280 then return immediately. 37 00:01:41,280 --> 00:01:43,530 And actually this is not going to work, 38 00:01:43,530 --> 00:01:45,890 but nevermind about this for now. 39 00:01:45,890 --> 00:01:48,440 So we will talk about error handling actually 40 00:01:48,440 --> 00:01:49,513 in the next video. 41 00:01:50,700 --> 00:01:53,063 Now here, there is some kind of problem. 42 00:01:53,940 --> 00:01:58,870 Now we're missing the closing parenthesis here now. 43 00:01:58,870 --> 00:02:00,290 Right? 44 00:02:00,290 --> 00:02:02,340 But now there is no error. 45 00:02:02,340 --> 00:02:05,533 And so let's do the second Ajax call. 46 00:02:06,540 --> 00:02:07,970 And let me just get the URL 47 00:02:07,970 --> 00:02:09,033 from up here. 48 00:02:10,060 --> 00:02:11,363 So that's this one. 49 00:02:14,660 --> 00:02:15,937 Now.Okay. 50 00:02:15,937 --> 00:02:19,220 And so, we use again fetch 51 00:02:21,040 --> 00:02:22,283 and then the URL. 52 00:02:24,740 --> 00:02:27,210 So let's call it country two and 53 00:02:27,210 --> 00:02:32,093 to your country one, all right. 54 00:02:33,170 --> 00:02:34,080 Now, for now, 55 00:02:34,080 --> 00:02:35,860 this is not going to do anything 56 00:02:35,860 --> 00:02:38,100 because what we need to do now is 57 00:02:38,100 --> 00:02:41,110 to actually return does new promise, 58 00:02:41,110 --> 00:02:43,120 because then when we do that, 59 00:02:43,120 --> 00:02:46,150 we will be able to chain a new then method 60 00:02:46,150 --> 00:02:49,563 on the result of this then method. 61 00:02:51,690 --> 00:02:52,600 All right. 62 00:02:52,600 --> 00:02:55,000 So that's a bit similar to what we did here 63 00:02:55,000 --> 00:02:56,373 with the JSON method, 64 00:02:57,280 --> 00:02:59,890 which remember also returned to promise. 65 00:02:59,890 --> 00:03:01,690 And so we return all of 66 00:03:01,690 --> 00:03:03,130 that promise here, 67 00:03:03,130 --> 00:03:06,050 and then we can chain a new then method on 68 00:03:06,050 --> 00:03:07,710 to that as well. 69 00:03:07,710 --> 00:03:09,020 Now, in the last lecture, 70 00:03:09,020 --> 00:03:13,000 I actually oversimplified how things really work. 71 00:03:13,000 --> 00:03:17,340 So actually the then method always returns a promise, 72 00:03:17,340 --> 00:03:21,020 no matter if we actually return anything or not. 73 00:03:21,020 --> 00:03:23,460 But if we do return a value, 74 00:03:23,460 --> 00:03:26,840 then that value will become the fulfillment value 75 00:03:26,840 --> 00:03:28,840 of the return promise. 76 00:03:28,840 --> 00:03:30,693 So let me actually show that to you. 77 00:03:31,550 --> 00:03:32,670 So instead of returning 78 00:03:32,670 --> 00:03:34,110 this for now, 79 00:03:34,110 --> 00:03:36,979 let me just return 23. 80 00:03:36,979 --> 00:03:40,563 And so then when I chain a new then method here, 81 00:03:42,730 --> 00:03:44,880 let's say data, 82 00:03:44,880 --> 00:03:47,793 and then let's alert debt data. 83 00:03:49,560 --> 00:03:50,950 Let's see. 84 00:03:50,950 --> 00:03:54,040 And then indeed we get 23. 85 00:03:54,040 --> 00:03:55,380 And so again, 86 00:03:55,380 --> 00:03:58,640 that happens because whatever we return from 87 00:03:58,640 --> 00:04:01,827 this promise here will become the fulfilled value 88 00:04:01,827 --> 00:04:03,113 of the promise. 89 00:04:03,990 --> 00:04:04,823 Okay? 90 00:04:05,660 --> 00:04:08,600 So again, this year it returns a promise. 91 00:04:08,600 --> 00:04:11,230 And so we can handle it using the then method 92 00:04:11,230 --> 00:04:13,450 And to fulfill to value, 93 00:04:13,450 --> 00:04:15,317 so the success value basically 94 00:04:15,317 --> 00:04:17,880 of the promise will be the valued that 95 00:04:17,880 --> 00:04:20,960 we return from this then method. 96 00:04:20,960 --> 00:04:21,793 Right? 97 00:04:21,793 --> 00:04:24,230 And so that is, this 23 here. 98 00:04:24,230 --> 00:04:27,110 And so therefore in the next then method, 99 00:04:27,110 --> 00:04:30,620 then the data here will be 23. 100 00:04:30,620 --> 00:04:33,980 And of course this year must be 23. 101 00:04:33,980 --> 00:04:36,663 Otherwise we cannot see that in effect. 102 00:04:37,810 --> 00:04:42,323 But yeah, so it is 23 because this value is 23. 103 00:04:43,950 --> 00:04:47,440 So again, this data that we receive here as an input 104 00:04:47,440 --> 00:04:50,920 to dysfunction is the fulfilled value of the promise 105 00:04:50,920 --> 00:04:52,270 that we're handling. 106 00:04:52,270 --> 00:04:53,880 And so again, 107 00:04:53,880 --> 00:04:55,610 that's this value 23, 108 00:04:55,610 --> 00:04:57,170 that we are returning from 109 00:04:57,170 --> 00:04:58,603 this then method here. 110 00:05:00,120 --> 00:05:01,130 Okay. 111 00:05:01,130 --> 00:05:03,140 But anyway, of course the same 112 00:05:03,140 --> 00:05:06,463 is true for ah, promises. 113 00:05:07,300 --> 00:05:09,230 And so by doing this, 114 00:05:09,230 --> 00:05:11,570 so by returning this promise here, 115 00:05:11,570 --> 00:05:13,020 then the fulfilled value 116 00:05:13,020 --> 00:05:17,340 of the next then method will be fulfilled value of 117 00:05:17,340 --> 00:05:18,930 this previous promise. 118 00:05:18,930 --> 00:05:19,883 So of this one. 119 00:05:21,470 --> 00:05:22,303 Okay. 120 00:05:22,303 --> 00:05:24,200 So I know that sounds confusing, 121 00:05:24,200 --> 00:05:27,590 but what you need to understand is that basically 122 00:05:27,590 --> 00:05:31,070 this then method here returns in your promise until, 123 00:05:31,070 --> 00:05:34,700 we can then one more time handle the success value 124 00:05:34,700 --> 00:05:35,763 of that promise. 125 00:05:36,830 --> 00:05:38,540 So one more time, I'm calling this 126 00:05:38,540 --> 00:05:40,130 one now a response, 127 00:05:40,130 --> 00:05:43,490 because here we are dealing with the fulfilled value 128 00:05:43,490 --> 00:05:45,780 of a fetch promise. 129 00:05:45,780 --> 00:05:48,123 And so that is a response. 130 00:05:49,030 --> 00:05:51,620 And so therefore I like to call it like that. 131 00:05:51,620 --> 00:05:52,960 And so here, one more time, 132 00:05:52,960 --> 00:05:55,950 we need to call the JSON method and that 133 00:05:55,950 --> 00:05:57,063 is pretty annoying, 134 00:05:58,000 --> 00:06:00,790 but that's just how we have to do it. 135 00:06:00,790 --> 00:06:01,860 And so here again, 136 00:06:01,860 --> 00:06:06,810 the fulfilled value of the promise will become dart body. 137 00:06:06,810 --> 00:06:08,750 So the data that is stored 138 00:06:08,750 --> 00:06:10,100 in the body, 139 00:06:10,100 --> 00:06:12,533 and then we can again, handle that. 140 00:06:13,620 --> 00:06:15,760 So data like this 141 00:06:16,870 --> 00:06:19,653 and then render country with data. 142 00:06:21,450 --> 00:06:23,280 And then here again, 143 00:06:23,280 --> 00:06:26,833 we pass in that CSS class for the neighbor. 144 00:06:28,740 --> 00:06:29,573 Okay. 145 00:06:29,573 --> 00:06:31,490 And that should already be it. 146 00:06:31,490 --> 00:06:34,160 And indeed, here we go. 147 00:06:34,160 --> 00:06:35,793 And if we try something else, 148 00:06:37,140 --> 00:06:39,173 let's say Germany, 149 00:06:40,070 --> 00:06:42,250 let's see what country we get 150 00:06:42,250 --> 00:06:43,643 and it's Austria. 151 00:06:44,480 --> 00:06:46,000 Okay. 152 00:06:46,000 --> 00:06:46,833 But anyway, 153 00:06:46,833 --> 00:06:51,833 let's just put it back to this one here and yeah, 154 00:06:51,940 --> 00:06:54,290 that's actually it already. 155 00:06:54,290 --> 00:06:55,710 So as you can see, 156 00:06:55,710 --> 00:06:56,810 promises really 157 00:06:56,810 --> 00:07:01,000 allow us to handle these complex asynchronous operations 158 00:07:01,000 --> 00:07:02,480 with as many steps 159 00:07:02,480 --> 00:07:03,920 as we want. 160 00:07:03,920 --> 00:07:07,010 So right now we have four steps here, even, 161 00:07:07,010 --> 00:07:09,490 but of course we could extend this as much 162 00:07:09,490 --> 00:07:10,930 as we want. 163 00:07:10,930 --> 00:07:13,230 So even if we wanted the neighbor of the neighbor 164 00:07:13,230 --> 00:07:14,380 of the neighbor, 165 00:07:14,380 --> 00:07:15,930 like 10 countries, 166 00:07:15,930 --> 00:07:19,110 we could easily do this by chaining all these promises 167 00:07:19,110 --> 00:07:21,120 one after another and all 168 00:07:21,120 --> 00:07:23,200 without the callback hell. 169 00:07:23,200 --> 00:07:25,360 So here, instead of the callback, 170 00:07:25,360 --> 00:07:29,760 hell we have what we call a flat chain of promises. 171 00:07:29,760 --> 00:07:32,390 And this one is again, 172 00:07:32,390 --> 00:07:35,640 very easy to understand and to read. 173 00:07:35,640 --> 00:07:39,220 So as a conclusion to this video and the previous one, 174 00:07:39,220 --> 00:07:40,330 promises really, 175 00:07:40,330 --> 00:07:44,010 are an incredibly powerful and elegant solution 176 00:07:44,010 --> 00:07:45,763 to handle asynchronous code. 177 00:07:46,640 --> 00:07:47,770 Now, just to finish, 178 00:07:47,770 --> 00:07:50,060 I want to show you a pretty common mistake 179 00:07:50,060 --> 00:07:51,940 that many beginners make, 180 00:07:51,940 --> 00:07:56,110 which is to basically chain this then method directly 181 00:07:56,110 --> 00:07:58,173 onto a new nested promise. 182 00:07:59,330 --> 00:08:01,060 So as we know, 183 00:08:01,060 --> 00:08:03,750 this one immediately returns a promise. 184 00:08:03,750 --> 00:08:08,190 And so many beginners basically do this instead, 185 00:08:08,190 --> 00:08:09,980 let me show it to you here. 186 00:08:09,980 --> 00:08:12,180 So instead of returning the new promise, 187 00:08:12,180 --> 00:08:16,150 they then chain theme then method right here. 188 00:08:16,150 --> 00:08:17,960 So right inside of 189 00:08:17,960 --> 00:08:19,063 this then method. 190 00:08:20,220 --> 00:08:22,720 Now this actually does still work, 191 00:08:22,720 --> 00:08:26,540 but then we are in fact back to callback hell. 192 00:08:26,540 --> 00:08:27,840 Because now indeed, 193 00:08:27,840 --> 00:08:30,100 we have one callback function here 194 00:08:30,100 --> 00:08:33,240 defined inside of another one. 195 00:08:33,240 --> 00:08:34,640 So inside of this, 196 00:08:34,640 --> 00:08:37,230 in closing callback function. 197 00:08:37,230 --> 00:08:38,270 Okay. 198 00:08:38,270 --> 00:08:39,250 And so of course 199 00:08:39,250 --> 00:08:41,510 that's exactly what we're trying to avoid. 200 00:08:41,510 --> 00:08:43,163 And so don't do this. 201 00:08:44,100 --> 00:08:46,210 So always return to promise 202 00:08:46,210 --> 00:08:49,090 and then handle it outside by simply continuing 203 00:08:49,090 --> 00:08:51,240 the chain like this. 204 00:08:51,240 --> 00:08:53,150 Alright, but I hope that this 205 00:08:53,150 --> 00:08:55,260 was already pretty obvious anyway, 206 00:08:55,260 --> 00:08:58,140 from all the explanations that I gave you throughout 207 00:08:58,140 --> 00:09:01,010 this lecture and the previous one. 208 00:09:01,010 --> 00:09:01,890 But anyway, 209 00:09:01,890 --> 00:09:05,520 let's now move on and actually handle errors because 210 00:09:05,520 --> 00:09:08,400 that is also a pretty common scenario when we work 211 00:09:08,400 --> 00:09:10,310 with promises and especially 212 00:09:10,310 --> 00:09:11,653 with Ajax calls.