1 00:00:01,350 --> 00:00:03,180 Welcome back, guys, to another lecture today. 2 00:00:03,210 --> 00:00:09,090 We're going to talk about async a wait, and this is actually one of the most important features in 3 00:00:09,090 --> 00:00:09,480 years. 4 00:00:09,870 --> 00:00:12,010 Eight now async. 5 00:00:12,450 --> 00:00:18,020 Oh, wait, it's nothing to do with how we write promises is actually how we consume them. 6 00:00:18,030 --> 00:00:19,020 So I'm going to show you that. 7 00:00:19,290 --> 00:00:28,240 Go back to this jump to this URL, Jason Placeholder and type type II diabetes dotcom. 8 00:00:28,350 --> 00:00:28,680 Right. 9 00:00:29,430 --> 00:00:31,410 Let me just grab this one. 10 00:00:31,410 --> 00:00:32,850 Go back to Google here. 11 00:00:33,210 --> 00:00:33,630 Right. 12 00:00:33,960 --> 00:00:38,040 And search this one, Sanjay. 13 00:00:38,040 --> 00:00:40,990 Someplace cooler type code dot com. 14 00:00:41,250 --> 00:00:46,470 Now, here here is a lot of users who actually have search this keyword before us. 15 00:00:46,680 --> 00:00:53,130 OK, now from here, I just want to grab the users and you can go through the examples and documentation 16 00:00:53,760 --> 00:00:57,330 and but I will need this one later, so I'm going to copy it right now. 17 00:00:57,780 --> 00:01:03,630 But I want to show you, if you go forward slash users, it will give me a Jason here screen with a 18 00:01:03,630 --> 00:01:04,660 lot of things inside. 19 00:01:05,220 --> 00:01:09,660 So the ID, a name, a user name and email for at least 10 users. 20 00:01:09,660 --> 00:01:09,950 Right. 21 00:01:10,470 --> 00:01:17,600 OK, so I'm going to be what we have here instead of to DOS because they have a lot of examples there. 22 00:01:17,880 --> 00:01:22,080 I'm going to grab the users and this is how we change the then method. 23 00:01:22,440 --> 00:01:29,230 And what async is doing is making these synthetical shuger how we consume the promise. 24 00:01:29,790 --> 00:01:39,180 Now the mostly benefit for async away is that this function will run in the background, so it will 25 00:01:39,180 --> 00:01:40,140 run in the background. 26 00:01:40,920 --> 00:01:45,330 Like I'm just going to copy this one and I'm going to go to the new Dev. 27 00:01:45,510 --> 00:01:49,780 I'm going to go to the inspector here and the console and I'm going to paste this one. 28 00:01:49,980 --> 00:01:55,240 So look, first, when I click here, the promise will be pending and after that it will be executed. 29 00:01:55,650 --> 00:01:56,190 Here it is. 30 00:01:56,600 --> 00:01:59,180 It was first the initial state spending, the promise. 31 00:01:59,610 --> 00:02:02,800 So there's always going to return a promise regardless of the output. 32 00:02:03,060 --> 00:02:08,580 And here we have the output here is successfully resolved means if it was not successful, it would 33 00:02:08,580 --> 00:02:09,920 have been rejected. 34 00:02:10,260 --> 00:02:14,190 No, cuz now I have 10 arrays of 10 objects. 35 00:02:14,190 --> 00:02:16,110 I have arrays of 10 objects, actually. 36 00:02:16,110 --> 00:02:16,390 Right. 37 00:02:16,920 --> 00:02:20,510 And so in initial state it was spending. 38 00:02:20,820 --> 00:02:22,770 But this is how we have right. 39 00:02:23,040 --> 00:02:24,940 Without the async away. 40 00:02:25,260 --> 00:02:32,310 So the beauty of wasting away is that that function actually can work in the background, can wait for 41 00:02:32,310 --> 00:02:35,480 this because we have a wait keyword inside. 42 00:02:35,910 --> 00:02:39,110 Now we wait for the promise to be resolved. 43 00:02:39,330 --> 00:02:42,420 Doesn't matter if it's going to be rejected or not. 44 00:02:42,660 --> 00:02:44,130 So it's going to wait for that result. 45 00:02:44,140 --> 00:02:48,970 But everything after it is, for example, imagine that we here we have a code here underneath we have 46 00:02:48,990 --> 00:02:51,270 a code and this is the single way function. 47 00:02:51,450 --> 00:02:53,940 So this code will run synchronously. 48 00:02:53,940 --> 00:02:58,890 So the async awake will not block our code from working. 49 00:02:59,010 --> 00:03:02,610 So it will run in the background until it gets the result. 50 00:03:02,900 --> 00:03:07,340 Okay, so let's rewrite this one using the async away. 51 00:03:07,350 --> 00:03:11,400 So async must we need you to use that keyword? 52 00:03:11,670 --> 00:03:19,580 And after that we will see a function and we will say fetch the user's right, make sure that its users. 53 00:03:19,770 --> 00:03:25,050 Now inside here I am going to say I'm going to copy first things first this. 54 00:03:26,130 --> 00:03:29,580 And I'm not going to use the then method here right now. 55 00:03:29,730 --> 00:03:38,170 As I told you, every single asynchronously function have a keyword of a weight now. 56 00:03:39,090 --> 00:03:45,060 So this program will we actually will run in the background, but it will wait until this promise is 57 00:03:45,060 --> 00:03:45,540 resolved. 58 00:03:45,810 --> 00:03:53,350 And when it's resolved, we usually const result just put it back to the result if I can type it. 59 00:03:54,870 --> 00:04:03,270 OK, now I do have the results stored in this variable here so I can see another function const data 60 00:04:03,420 --> 00:04:10,230 and I will say again, I wait because this data, for example, it will go here and it will say, OK, 61 00:04:10,230 --> 00:04:10,950 I'm waiting for it. 62 00:04:10,980 --> 00:04:12,830 So let's jump to this line. 63 00:04:13,170 --> 00:04:16,980 So and this line is still waiting for the result of this. 64 00:04:17,010 --> 00:04:20,220 So now what is so nice with Jason? 65 00:04:20,440 --> 00:04:23,150 I'm sorry, we need to use the Jason method here. 66 00:04:23,400 --> 00:04:29,370 Well, it's so nice because actually we say, OK, this data is required to result from the previous 67 00:04:29,370 --> 00:04:33,350 promise so it will not run and so it will skip until we get that one. 68 00:04:33,600 --> 00:04:35,840 So it will not block our code. 69 00:04:36,000 --> 00:04:43,830 And if the promise is not there, it will go above this below this line and we will execute synchronously 70 00:04:44,130 --> 00:04:45,370 the rest of the code. 71 00:04:45,540 --> 00:04:46,730 So that is the beauty. 72 00:04:46,950 --> 00:04:54,690 So simple as that async function allows this function to work in the background until it gets the result 73 00:04:55,020 --> 00:04:56,490 and it will not get blocked. 74 00:04:56,490 --> 00:04:59,790 Because this one, this line is. 75 00:04:59,870 --> 00:05:04,460 Waiting for the results of this line and this line is still waiting, for example, then you will say, 76 00:05:04,460 --> 00:05:08,810 OK, he's still waiting for the result, we're not going to throw in there because you're trying to 77 00:05:08,810 --> 00:05:10,070 get that call. 78 00:05:10,640 --> 00:05:18,530 Now, the most usual way to do this place, again, to use the console, lock the lock and put the data 79 00:05:18,530 --> 00:05:18,810 back. 80 00:05:18,900 --> 00:05:25,520 Now, one more thing that we need to call this function, because it's not going to work so that users 81 00:05:25,520 --> 00:05:26,300 outside here. 82 00:05:26,430 --> 00:05:31,100 So I'm going to copy the entire one here and I'm going to have the results. 83 00:05:31,100 --> 00:05:33,020 Same result as before. 84 00:05:33,350 --> 00:05:35,150 So I'm going to just enter. 85 00:05:35,510 --> 00:05:36,170 And here it is. 86 00:05:36,170 --> 00:05:41,840 The result was the promise was pending and I got the same same results, same error. 87 00:05:42,560 --> 00:05:47,500 If I go back here is well, Leon Graham and here is Leon. 88 00:05:47,510 --> 00:05:47,920 Right. 89 00:05:48,650 --> 00:05:49,640 Username Brett. 90 00:05:50,180 --> 00:05:50,630 Nice. 91 00:05:51,080 --> 00:05:54,740 So now you know why we need to use the async function. 92 00:05:54,950 --> 00:05:59,380 And it's like a synthetic shuga, how we consume the promise. 93 00:05:59,840 --> 00:06:02,150 This is more readable than this for me. 94 00:06:02,240 --> 00:06:04,460 I use then method, then I change another method. 95 00:06:04,850 --> 00:06:06,530 Imagine if we have a couple of steps here. 96 00:06:06,530 --> 00:06:08,300 We need to change a couple of things. 97 00:06:09,560 --> 00:06:09,890 Right. 98 00:06:10,040 --> 00:06:17,990 And in the previous lecture, just in the previous lecture, I used different examples so you can go 99 00:06:17,990 --> 00:06:18,800 and see this one. 100 00:06:19,520 --> 00:06:21,170 But it's pretty much this. 101 00:06:21,980 --> 00:06:24,500 So it's a synthetic shuger of how we doing things. 102 00:06:24,680 --> 00:06:27,890 And it's make more simple easier to get graphs. 103 00:06:28,250 --> 00:06:29,690 And yeah. 104 00:06:29,700 --> 00:06:32,210 So it is not less code, by the way. 105 00:06:32,420 --> 00:06:39,530 It's pretty much like the same amount of code, but it's a four i's more pleasing. 106 00:06:39,530 --> 00:06:42,400 So somebody will argue, OK, this is a lot more than this. 107 00:06:42,710 --> 00:06:49,280 Well it is, but this is the way how we should get used to writing the asynchronous function and that's 108 00:06:49,280 --> 00:06:51,680 why we use them in our previous project. 109 00:06:52,070 --> 00:06:56,630 So whenever we deal with APIs, it's best to use it like this. 110 00:06:56,790 --> 00:06:57,140 Right. 111 00:06:57,830 --> 00:06:59,810 So that is pretty much it for this one. 112 00:06:59,810 --> 00:07:01,850 And I will see you in the next one. 113 00:07:01,880 --> 00:07:07,010 By the way, we you do have the essay exercise. 114 00:07:07,520 --> 00:07:11,360 So if I click here now, look through this one. 115 00:07:11,360 --> 00:07:12,320 It's nothing scary. 116 00:07:12,650 --> 00:07:13,100 Right? 117 00:07:14,180 --> 00:07:16,020 And you should be able here it is. 118 00:07:16,070 --> 00:07:17,480 Should be six instead of nine. 119 00:07:17,690 --> 00:07:19,200 I just saw that mistake. 120 00:07:19,460 --> 00:07:22,820 Now, what we've talked about before, you can use it here. 121 00:07:22,820 --> 00:07:23,780 Don't worry about this. 122 00:07:23,960 --> 00:07:27,740 These are just emoji here that I use, but read it carefully. 123 00:07:27,950 --> 00:07:33,170 And if you can't solve it, just go back to the next to this one. 124 00:07:33,170 --> 00:07:38,360 Actually, the easiest solutions and you will find the solution right now. 125 00:07:38,570 --> 00:07:40,190 Take care and I will see you in the next one.