1 00:00:02,420 --> 00:00:05,373 Now to load all the, to do's we need to 2 00:00:05,373 --> 00:00:09,040 send this age to the peer request for fetching 3 00:00:09,040 --> 00:00:10,050 all the, to do's. 4 00:00:10,050 --> 00:00:12,076 This one here from todos.js, 5 00:00:12,076 --> 00:00:16,210 whenever this view app starts, so to say. 6 00:00:16,210 --> 00:00:19,210 So whenever our page becomes active in Vue, 7 00:00:19,210 --> 00:00:21,070 therefore it becomes active. 8 00:00:21,070 --> 00:00:23,810 And since this is a very common case that you want to 9 00:00:23,810 --> 00:00:27,260 execute some code. When the Vue app starts, 10 00:00:27,260 --> 00:00:32,000 there are so-called lifecycle hooks provided by Vue, 11 00:00:32,000 --> 00:00:33,530 which are special methods, 12 00:00:33,530 --> 00:00:37,235 which you can add to this overall Vue managed object here, 13 00:00:37,235 --> 00:00:41,020 where we also added data and methods, 14 00:00:41,020 --> 00:00:46,020 which will be activated by Vue JS at certain points of time. 15 00:00:46,140 --> 00:00:48,543 That's why they are called lifecycle methods 16 00:00:48,543 --> 00:00:51,840 or lifecycle hooks also. 17 00:00:51,840 --> 00:00:55,100 And here I'll add one, maybe after all those methods, 18 00:00:55,100 --> 00:00:57,370 though, the exact position doesn't matter. 19 00:00:57,370 --> 00:00:59,573 And that would be the created method. 20 00:01:00,510 --> 00:01:02,540 So that's not very important. 21 00:01:02,540 --> 00:01:06,240 This is now not a method that's added to 22 00:01:06,240 --> 00:01:09,440 this methods object here. 23 00:01:09,440 --> 00:01:12,830 If I fold that you see it's next to methods, 24 00:01:12,830 --> 00:01:17,170 not inside of methods, because this is not a custom method, 25 00:01:17,170 --> 00:01:19,280 which I want to call myself or 26 00:01:19,280 --> 00:01:22,400 trigger upon some user input event. 27 00:01:22,400 --> 00:01:25,720 But instead that's a special reserved method name, 28 00:01:25,720 --> 00:01:29,880 just like data or methods are reserved names 29 00:01:29,880 --> 00:01:32,240 Vue JS will be looking for. 30 00:01:32,240 --> 00:01:35,650 And the Vue JS will be looking for such a created method 31 00:01:35,650 --> 00:01:38,170 and it will call that method whenever 32 00:01:38,170 --> 00:01:40,780 this Vue app was created, 33 00:01:40,780 --> 00:01:44,930 which happens as soon as the Vue JS code executes and starts 34 00:01:44,930 --> 00:01:47,433 taking over control over this page, 35 00:01:48,570 --> 00:01:51,603 there also is another built in lifecycle hook method 36 00:01:51,603 --> 00:01:53,000 that we could have used. 37 00:01:53,000 --> 00:01:56,070 And that would have been the mounted method. 38 00:01:56,070 --> 00:01:58,870 It's very similar, but that will become active 39 00:01:58,870 --> 00:02:01,590 once the Vue app was created and 40 00:02:01,590 --> 00:02:04,060 it took control over the Dom, 41 00:02:04,060 --> 00:02:06,440 which means it added all the event listeners to 42 00:02:06,440 --> 00:02:08,520 the Dom and so on. 43 00:02:08,520 --> 00:02:10,710 Created runs a little bit earlier. 44 00:02:10,710 --> 00:02:14,950 It runs when the UJS code executed right before its took 45 00:02:14,950 --> 00:02:17,720 full control over the dorm. 46 00:02:17,720 --> 00:02:20,120 There won't be a huge time difference, 47 00:02:20,120 --> 00:02:21,700 but there is a small gap. 48 00:02:21,700 --> 00:02:25,060 And it's up to you where you want to execute your code 49 00:02:25,060 --> 00:02:27,140 to fetch all the to do's either of 50 00:02:27,140 --> 00:02:29,790 the two lifecycle hooks will work because 51 00:02:29,790 --> 00:02:34,730 both run right at the beginning of this website so to say, 52 00:02:34,730 --> 00:02:36,553 when this website was loaded. 53 00:02:37,490 --> 00:02:41,020 So here I will use created and integrated. 54 00:02:41,020 --> 00:02:44,100 I now want to take that code from todos.js, 55 00:02:44,100 --> 00:02:46,760 where I get all my to do's. 56 00:02:46,760 --> 00:02:49,933 So here we can actually take all that code, 57 00:02:50,810 --> 00:02:52,250 actually all that code here, 58 00:02:52,250 --> 00:02:55,730 including the response variable and add that here 59 00:02:55,730 --> 00:02:57,953 in app JS, like this. 60 00:02:59,890 --> 00:03:03,780 So now inside of created, we fetch our to do's. 61 00:03:03,780 --> 00:03:07,200 We have this standard error handling in there, 62 00:03:07,200 --> 00:03:11,090 and then here, I got my to do's from the response, 63 00:03:11,090 --> 00:03:13,610 which is sent back by the API. 64 00:03:13,610 --> 00:03:14,443 And of course, 65 00:03:14,443 --> 00:03:17,073 I then want to output those to do's on the screen, 66 00:03:17,910 --> 00:03:20,830 now to output that data, we, again, 67 00:03:20,830 --> 00:03:23,400 just want to set our Vue data, 68 00:03:23,400 --> 00:03:25,240 our data managed by Vue. 69 00:03:25,240 --> 00:03:28,070 And when that data changes Vue will therefore 70 00:03:28,070 --> 00:03:30,800 automatically update the Dawn. 71 00:03:30,800 --> 00:03:32,330 So once I got the to do's, 72 00:03:32,330 --> 00:03:35,220 all I want to do is I want to set this to do's. 73 00:03:35,220 --> 00:03:38,299 So my data to do's equal to the fetched to do's 74 00:03:38,299 --> 00:03:41,770 and Vue JS will detect this change in to do's 75 00:03:41,770 --> 00:03:45,110 in this to do's data and will therefore update all 76 00:03:45,110 --> 00:03:47,740 the parts of the screen of the Dom, 77 00:03:47,740 --> 00:03:49,863 where the to do's are being used. 78 00:03:50,830 --> 00:03:51,870 So here we can say, 79 00:03:51,870 --> 00:03:55,461 instead of const_todos equals responseData.todos, 80 00:03:55,461 --> 00:03:59,070 this.todos equals responseData.todos. 81 00:03:59,070 --> 00:04:01,260 To update our Vue managed data 82 00:04:01,260 --> 00:04:04,680 with the to do's we find in the response. 83 00:04:04,680 --> 00:04:06,913 And that will then trigger a page update. 84 00:04:08,070 --> 00:04:11,246 So that should be all. At least almost. 85 00:04:11,246 --> 00:04:14,673 Of course, we again are using the await keyword. 86 00:04:15,740 --> 00:04:18,990 Now in the past, we unlocked the await keyword 87 00:04:18,990 --> 00:04:21,500 by adding async in front of the method 88 00:04:21,500 --> 00:04:25,370 where we use a weight where we use a weight and 89 00:04:25,370 --> 00:04:28,490 indeed that is how it does work in JavaScript. 90 00:04:28,490 --> 00:04:30,750 And if we do that and save everything, 91 00:04:30,750 --> 00:04:33,500 once you reload the page, you should see all the, 92 00:04:33,500 --> 00:04:35,490 to do's here, including the, to do's 93 00:04:35,490 --> 00:04:39,080 in my case, that were created in the past core section, 94 00:04:39,080 --> 00:04:41,290 because I'm talking to the same API, 95 00:04:41,290 --> 00:04:43,610 which uses the same database. 96 00:04:43,610 --> 00:04:47,060 So now these to do's are here and you should not see 97 00:04:47,060 --> 00:04:50,393 any errors in your JavaScript console here. 98 00:04:51,240 --> 00:04:53,690 Now as a little side note at this point, 99 00:04:53,690 --> 00:04:56,290 I want to highlight that we can add async 100 00:04:56,290 --> 00:04:58,610 in front of the created life cycle method, 101 00:04:58,610 --> 00:05:01,340 but I want to make you aware of the fact that 102 00:05:01,340 --> 00:05:05,440 Vue JS does actually call created for you, 103 00:05:05,440 --> 00:05:07,723 just as it would have called mounted for you, 104 00:05:07,723 --> 00:05:12,723 but it does not wait for the promise created or mounted 105 00:05:13,160 --> 00:05:15,480 might return to resolve. 106 00:05:15,480 --> 00:05:17,690 Which means since we add async here, 107 00:05:17,690 --> 00:05:19,643 you'll learn created will return a promise. 108 00:05:19,643 --> 00:05:21,710 That's how async works, 109 00:05:21,710 --> 00:05:24,539 whichever method or function you decorate with it 110 00:05:24,539 --> 00:05:28,850 will return a promise always. And that's okay here, 111 00:05:28,850 --> 00:05:30,940 but Vue JS won't wait for it, 112 00:05:30,940 --> 00:05:34,240 which means it will continue with its life cycle, 113 00:05:34,240 --> 00:05:38,208 even before the responses here, which is no problem here, 114 00:05:38,208 --> 00:05:41,540 but it means that technically initially there is 115 00:05:41,540 --> 00:05:46,450 a super brief period of maybe one or a 10 milliseconds 116 00:05:46,450 --> 00:05:49,530 where Vue JS took over control. 117 00:05:49,530 --> 00:05:51,820 But the data isn't there yet, 118 00:05:51,820 --> 00:05:53,450 we don't even see that here 119 00:05:53,450 --> 00:05:56,430 because our API runs on our local machine. 120 00:05:56,430 --> 00:05:59,290 And therefore the response is super fast. 121 00:05:59,290 --> 00:06:01,840 But if you would be talking to an API where 122 00:06:01,840 --> 00:06:04,385 you wait a second or so for the response, 123 00:06:04,385 --> 00:06:06,161 it would mean that initially, 124 00:06:06,161 --> 00:06:08,448 there wouldn't be any to do's 125 00:06:08,448 --> 00:06:11,703 and they would only appear after a second or so. 126 00:06:12,710 --> 00:06:14,979 Therefore what you might want to do 127 00:06:14,979 --> 00:06:19,440 is you might want to show some loading state 128 00:06:19,440 --> 00:06:22,176 whilst you are waiting for those to do's. 129 00:06:22,176 --> 00:06:24,795 And you can do that with help of 130 00:06:24,795 --> 00:06:27,900 Vue's data management as well. 131 00:06:27,900 --> 00:06:32,140 Here in this data we could add is loading data property, 132 00:06:32,140 --> 00:06:34,083 which initially is false, let's say. 133 00:06:35,550 --> 00:06:39,680 And in all the places where we send the requests 134 00:06:39,680 --> 00:06:42,400 where we then want to wait for a response, 135 00:06:42,400 --> 00:06:45,809 because we can't display data until we have the response. 136 00:06:45,809 --> 00:06:48,215 As it's the case here for all the to do's, 137 00:06:48,215 --> 00:06:51,080 we could then go to the place where we start 138 00:06:51,080 --> 00:06:54,200 sending the request in this case here, 139 00:06:54,200 --> 00:06:57,058 before we even try sending the request. 140 00:06:57,058 --> 00:07:01,030 Instead this is loading to true in this case 141 00:07:01,030 --> 00:07:03,480 because we start loading the data 142 00:07:03,480 --> 00:07:06,090 and then we want to make sure that 143 00:07:06,090 --> 00:07:08,518 once we have the response, we set this 144 00:07:08,518 --> 00:07:11,973 as loading to false because we have the response. 145 00:07:13,150 --> 00:07:14,810 And I actually also want to do that 146 00:07:14,810 --> 00:07:16,770 if we catch an error because then, 147 00:07:16,770 --> 00:07:18,900 of course we don't have a valid response, 148 00:07:18,900 --> 00:07:22,163 but we're also not sending an HTTP request anymore. 149 00:07:23,080 --> 00:07:25,111 So I also set isLoading false to here, 150 00:07:25,111 --> 00:07:28,566 but also here after catching and handling an error. 151 00:07:28,566 --> 00:07:30,430 Once we have a response, 152 00:07:30,430 --> 00:07:32,160 no matter if it's okay or not. 153 00:07:32,160 --> 00:07:34,480 So no matter which status code it has, 154 00:07:34,480 --> 00:07:35,980 we have a response and therefore, 155 00:07:35,980 --> 00:07:37,963 I wanna say is loading to false. 156 00:07:39,770 --> 00:07:42,610 And then we can use, this is loading state, of course, 157 00:07:42,610 --> 00:07:46,410 in the Dom to output some helpful message. 158 00:07:46,410 --> 00:07:49,435 And for example, here, where we have the if, 159 00:07:49,435 --> 00:07:53,560 and v-else on, we could modify this a bit and say, 160 00:07:53,560 --> 00:07:54,909 we want to show this text 161 00:07:54,909 --> 00:07:57,760 if to do's length is zero, 162 00:07:57,760 --> 00:08:02,760 and we are not loading because if we are loading, 163 00:08:02,990 --> 00:08:05,050 we of course don't have any to do's yet. 164 00:08:05,050 --> 00:08:06,630 But that might change. 165 00:08:06,630 --> 00:08:09,110 So showing this text would be wrong 166 00:08:09,110 --> 00:08:10,520 because we might have to do's, 167 00:08:10,520 --> 00:08:12,663 we might just not have loaded them yet. 168 00:08:13,940 --> 00:08:16,410 And instead I'll add another case here 169 00:08:16,410 --> 00:08:18,170 where I'll say "Loading...", 170 00:08:18,170 --> 00:08:20,853 And I want to show that as long as I am loading. 171 00:08:21,890 --> 00:08:24,140 No, you cannot just write v-if, 172 00:08:24,140 --> 00:08:28,120 and v-else you can also add a v-else-if 173 00:08:28,120 --> 00:08:30,393 case for cases like this. 174 00:08:31,520 --> 00:08:33,630 Now when you add this directive, 175 00:08:33,630 --> 00:08:35,789 this Vue managed attribute. 176 00:08:35,789 --> 00:08:38,450 You can add another else-if condition here, 177 00:08:38,450 --> 00:08:40,230 where you say, 178 00:08:40,230 --> 00:08:42,250 if we didn't make it into this condition, 179 00:08:42,250 --> 00:08:43,799 because maybe we're loading, 180 00:08:43,799 --> 00:08:45,495 then I want to check this case. 181 00:08:45,495 --> 00:08:48,480 And here we could say, if we're loading, 182 00:08:48,480 --> 00:08:50,790 then I want to show "Loading..." 183 00:08:50,790 --> 00:08:53,575 And only if we're not loading, 184 00:08:53,575 --> 00:08:56,970 and we have to do is length right here, zero, 185 00:08:56,970 --> 00:08:58,783 I want to make it into this case. 186 00:09:00,090 --> 00:09:01,960 With all of that, If you reload, 187 00:09:01,960 --> 00:09:04,456 you get almost the same behavior as before, 188 00:09:04,456 --> 00:09:06,730 but to show you what's happening, 189 00:09:06,730 --> 00:09:09,360 I'll open the Def tools and go to network. 190 00:09:09,360 --> 00:09:12,000 And there we can actually turn on throttling 191 00:09:12,000 --> 00:09:15,729 and go to slow 3G to throttle the network speed, 192 00:09:15,729 --> 00:09:18,330 and then reload this page. 193 00:09:18,330 --> 00:09:20,270 Now reloading itself will take awhile 194 00:09:20,270 --> 00:09:22,540 until the new index HTML file is fetched, 195 00:09:22,540 --> 00:09:24,600 but then you'll see the loading text here. 196 00:09:24,600 --> 00:09:26,233 And then you see the, to do's. 197 00:09:28,300 --> 00:09:30,380 Now I'll go back to no throttling, 198 00:09:30,380 --> 00:09:32,143 but that is how this works. 199 00:09:33,350 --> 00:09:34,880 And you can play around with that. 200 00:09:34,880 --> 00:09:37,530 And of course all the manage more states, 201 00:09:37,530 --> 00:09:40,633 depending on what your goals for this application are.