1 00:00:04,890 --> 00:00:06,180 Welcome back. 2 00:00:06,510 --> 00:00:10,770 Let's see how we can make use of async await. 3 00:00:11,430 --> 00:00:11,880 Great. 4 00:00:11,880 --> 00:00:15,690 So back to Visual Studio code as usual. 5 00:00:15,720 --> 00:00:16,790 Less common. 6 00:00:16,800 --> 00:00:18,570 This one's out. 7 00:00:18,570 --> 00:00:27,540 And now this one also lets comment out to avoid variable name conflicts and avoid unnecessary console 8 00:00:27,540 --> 00:00:28,080 login. 9 00:00:28,290 --> 00:00:34,950 So back here as usual, going to be async await. 10 00:00:36,090 --> 00:00:36,890 Okay. 11 00:00:36,900 --> 00:00:39,330 So now here we go. 12 00:00:39,660 --> 00:00:40,140 All right. 13 00:00:40,140 --> 00:00:41,860 So let's get started with the code. 14 00:00:41,880 --> 00:00:48,120 So at the same logic, we are assuming we are going to make API call or write a code that needs some 15 00:00:48,120 --> 00:00:50,410 time to execute to fetch a user. 16 00:00:50,430 --> 00:00:54,870 So here the first thing is, let's see how we can create async function. 17 00:00:54,870 --> 00:01:01,670 So let's follow the syntax here which says that we need to bring async in front of function name. 18 00:01:01,680 --> 00:01:03,660 So here we go, async. 19 00:01:03,660 --> 00:01:08,370 And then you bring in the function keyword and the function name is that. 20 00:01:08,460 --> 00:01:18,420 So here is going to be function, the name of my function going to be get user and there you go. 21 00:01:18,510 --> 00:01:25,620 So here what we are going to do is we are going to make API call to fetch a user. 22 00:01:25,740 --> 00:01:34,620 So here make make API call to fetch user. 23 00:01:34,620 --> 00:01:40,830 So here what you're going to do is that we can say that for the meantime, let's say the response to 24 00:01:40,920 --> 00:01:48,990 our code and here we need to use await in front of any code that needs some time to execute. 25 00:01:49,560 --> 00:01:56,220 So for this function, if we see that we put our weight in front of this function that needs some time 26 00:01:56,220 --> 00:01:56,940 to execute. 27 00:01:56,950 --> 00:02:02,190 So here we can also write our own function that needs some time to execute. 28 00:02:02,190 --> 00:02:03,950 So our market as await. 29 00:02:03,960 --> 00:02:08,850 And here I can write any code that needs some time to execute. 30 00:02:08,850 --> 00:02:15,210 For the meantime, let's go ahead and create a function somewhere here and then we reference it inside 31 00:02:15,210 --> 00:02:15,700 here. 32 00:02:15,720 --> 00:02:19,110 So going to be normal function and then let's say make. 33 00:02:20,050 --> 00:02:22,720 API request. 34 00:02:24,150 --> 00:02:28,980 And then here we go, because this function needs some time to execute. 35 00:02:29,010 --> 00:02:31,830 We need to return a performance from this particular function. 36 00:02:32,070 --> 00:02:37,560 If you get back to a section where we talk about making red API calls, you better understand all these 37 00:02:37,560 --> 00:02:38,070 concepts. 38 00:02:38,070 --> 00:02:44,460 Again, we are going to repeat ourselves by using all these methods to code or to develop real world 39 00:02:44,460 --> 00:02:45,150 applications. 40 00:02:45,150 --> 00:02:46,660 So let's continue on. 41 00:02:46,680 --> 00:02:50,970 So for this particular function is going to take some time to execute. 42 00:02:51,000 --> 00:02:53,900 So after calling this function, we need to have with that. 43 00:02:53,910 --> 00:02:58,710 So we're going to use a promise and set time out here to simulate async code. 44 00:02:58,740 --> 00:03:04,860 So here we go, as we did before, we are going to return a function, a promise from this function 45 00:03:04,860 --> 00:03:06,050 with some set timeout. 46 00:03:06,060 --> 00:03:10,290 So here we go, make use of new and then the promise. 47 00:03:10,830 --> 00:03:14,310 And then this promise are passed in the callback function. 48 00:03:14,340 --> 00:03:16,080 I have the result. 49 00:03:16,350 --> 00:03:19,230 And then the reject this one too. 50 00:03:19,260 --> 00:03:22,500 We have done it many times, so that's what I'm speeding up here. 51 00:03:22,920 --> 00:03:29,400 So for the meantime, let's inside the resolve here, we are going to simulate how we are going to get 52 00:03:29,400 --> 00:03:29,910 a response. 53 00:03:29,910 --> 00:03:34,410 So let's make use of set time out here to delay the response coming back. 54 00:03:34,410 --> 00:03:40,800 So my error function is that in a time to finish executing, let's see, after 5 seconds, I want to 55 00:03:40,800 --> 00:03:41,790 get the user back. 56 00:03:41,940 --> 00:03:50,040 So here we are waiting to resolve the promise, resolve the promise, or we are going to reject. 57 00:03:50,040 --> 00:03:51,780 So as we did before. 58 00:03:51,810 --> 00:03:58,380 Let's assume that is user fetch going to be let me say is fetched. 59 00:03:59,370 --> 00:04:06,710 Equal to trillion, and then the actual user led user is going to be objects with few property names, 60 00:04:06,720 --> 00:04:12,900 the name going to be as Mickey and hence, let's say the age is equal to 20. 61 00:04:13,020 --> 00:04:17,700 So let's make some conditions to return whether is resolve or rejects as we did before. 62 00:04:17,700 --> 00:04:24,930 So for this one, if indeed is fetched, meaning we get back the response after 5 seconds, then we 63 00:04:24,930 --> 00:04:28,650 can go ahead and then return result. 64 00:04:28,680 --> 00:04:36,300 Then you pass in the user you want to send to the user and then if rejects, then we can also call reject 65 00:04:36,300 --> 00:04:40,050 and then we can say that error fetching. 66 00:04:43,010 --> 00:04:45,580 Fetch end user. 67 00:04:45,590 --> 00:04:46,280 Perfect. 68 00:04:46,520 --> 00:04:49,340 So now back to our async function now. 69 00:04:49,550 --> 00:04:54,710 So for this one, like I said, if you're making API call this are going to be pretty simple. 70 00:04:54,980 --> 00:05:00,410 We can use fetch to make the API call, get, get and then the end point, you're going to get very 71 00:05:00,410 --> 00:05:01,400 simple as that. 72 00:05:01,400 --> 00:05:07,220 But because we are not making API call, that's why I'm returning a promise from this one with some 73 00:05:07,220 --> 00:05:09,090 time you needed to execute. 74 00:05:09,110 --> 00:05:12,030 Then I kind of wait inside this function to get it. 75 00:05:12,050 --> 00:05:16,260 So now I'm going to call the function here called make API request. 76 00:05:16,280 --> 00:05:19,100 Remember, this function is returning. 77 00:05:19,100 --> 00:05:20,350 What a promise. 78 00:05:20,360 --> 00:05:22,580 And this one needs some time to execute. 79 00:05:22,580 --> 00:05:25,540 Because look here, it needs 5 seconds to execute. 80 00:05:25,550 --> 00:05:32,500 That's why we are waiting this particular function to get done before we can vote. 81 00:05:32,540 --> 00:05:34,400 Send the response to the user. 82 00:05:34,610 --> 00:05:42,320 So for this one, if I console.log the response here and then check the console. 83 00:05:42,350 --> 00:05:43,020 Let's check it out. 84 00:05:43,040 --> 00:05:44,870 Nothing has been displayed yet. 85 00:05:44,870 --> 00:05:47,690 So if I call the function, get user. 86 00:05:47,720 --> 00:05:49,940 So let's wait after 5 seconds. 87 00:05:49,940 --> 00:05:54,560 One, two, three, four, five. 88 00:05:54,560 --> 00:05:58,110 And indeed, you see that I get what, Mikki? 89 00:05:58,130 --> 00:06:05,000 Here you see that we want to make use of dot then of the card to get a user, because I'm just using 90 00:06:05,000 --> 00:06:09,610 one line of code, then I get it back without the then dot, then draw then. 91 00:06:09,620 --> 00:06:14,210 So assuming we are making some API, call our life pretty easy. 92 00:06:14,210 --> 00:06:18,110 Just typing in the API request here and we are good to go. 93 00:06:18,380 --> 00:06:21,320 But the point here says that check it out. 94 00:06:21,830 --> 00:06:23,060 It says that. 95 00:06:23,930 --> 00:06:28,130 Come down here, use try and how to handle success and error. 96 00:06:28,130 --> 00:06:32,630 So here we are making use of try and catch by default. 97 00:06:32,870 --> 00:06:36,560 We are getting the result because indeed it has been resolved. 98 00:06:36,710 --> 00:06:38,420 What about if it's rejects? 99 00:06:38,420 --> 00:06:41,480 Let's say here is force, let's save it. 100 00:06:41,480 --> 00:06:47,780 And now check it out after 5 seconds, if something's going to happen, you can see that we get the 101 00:06:47,780 --> 00:06:49,940 same error as we did before. 102 00:06:49,940 --> 00:06:53,150 But this time around we get our own error error fetching. 103 00:06:53,150 --> 00:06:59,120 But this error is coming from JavaScript, meaning that anytime you see on code in promise is simply 104 00:06:59,120 --> 00:07:02,690 means that we are not handling the error well. 105 00:07:02,750 --> 00:07:11,410 So to do that, that's why we need the try and catch meaning catch is for error and try it for resolve. 106 00:07:11,600 --> 00:07:11,990 Great. 107 00:07:11,990 --> 00:07:14,120 So back to our function here. 108 00:07:14,270 --> 00:07:18,500 Instead of doing this way, we are going to use try and try to handle that. 109 00:07:18,500 --> 00:07:24,860 So here we bring in try and then press and here catch. 110 00:07:25,980 --> 00:07:31,950 And then as a function call and here you're passing one agreements which present a value we get from 111 00:07:31,950 --> 00:07:34,570 the reject for premise. 112 00:07:34,590 --> 00:07:35,910 This one going to be catch. 113 00:07:35,940 --> 00:07:36,270 Right. 114 00:07:36,270 --> 00:07:38,760 So the same way as we use in promise. 115 00:07:38,760 --> 00:07:40,610 Likewise in async await. 116 00:07:40,620 --> 00:07:47,400 So here we are making the actual logic case or place it inside my trial and then catch just console.log 117 00:07:47,400 --> 00:07:49,410 the the error here. 118 00:07:49,440 --> 00:07:50,760 Now save it. 119 00:07:50,790 --> 00:07:51,660 Check it out. 120 00:07:51,900 --> 00:07:58,290 After 5 seconds, we're going to have the beautiful error that we implemented and indeed we have error 121 00:07:58,290 --> 00:07:59,400 fetching user. 122 00:07:59,430 --> 00:08:08,520 So inside this one to my try our console.log response now we let's now let's assume that our. 123 00:08:09,510 --> 00:08:11,160 Core was success. 124 00:08:11,160 --> 00:08:14,420 So true here and now after 5 seconds. 125 00:08:14,430 --> 00:08:17,700 One, two, three, four, five. 126 00:08:17,700 --> 00:08:21,930 And indeed, we have Mickey as our object. 127 00:08:21,930 --> 00:08:28,350 So if this one looks clear to you, like I said, when we get to making API calls, this syntax is pretty 128 00:08:28,350 --> 00:08:34,049 easy to use and I'm going to make use of using promise here and then use async await down here. 129 00:08:34,200 --> 00:08:34,710 All right. 130 00:08:34,710 --> 00:08:41,610 So the next video, I'm going to have our coding challenges and after that we move on to how we can 131 00:08:41,610 --> 00:08:42,780 make API calls. 132 00:08:42,780 --> 00:08:49,440 We are going to build awesome applications like weather applications, translation applications and 133 00:08:49,440 --> 00:08:53,370 any API based project we can build using this concept.