1 00:00:05,110 --> 00:00:06,520 Welcome back. 2 00:00:06,550 --> 00:00:13,360 In this video, let's see how we can create a function that retains a promise. 3 00:00:13,690 --> 00:00:17,800 And this is what we are going to use in rare use cases. 4 00:00:17,800 --> 00:00:19,720 So let's get started. 5 00:00:22,140 --> 00:00:22,710 Perfect. 6 00:00:22,710 --> 00:00:29,190 So coming back to our code, we are now going to refactor this using a function perfect. 7 00:00:29,190 --> 00:00:31,830 So the logic is the same. 8 00:00:31,830 --> 00:00:35,670 We are going to create a function to fetch a user from database. 9 00:00:35,700 --> 00:00:37,710 I mean, we are trying to mimic. 10 00:00:38,760 --> 00:00:41,340 All right, so let's get started. 11 00:00:41,340 --> 00:00:42,810 So let me comment. 12 00:00:42,810 --> 00:00:48,450 This one's out here for the meantime as that. 13 00:00:48,900 --> 00:00:52,470 And now let's come down here and says. 14 00:00:55,370 --> 00:00:56,390 Function. 15 00:00:58,690 --> 00:00:59,590 Retain. 16 00:01:02,360 --> 00:01:05,150 Returns a promise or function in returning a promise. 17 00:01:05,150 --> 00:01:09,040 I think there's going to be good function in returning a promise I'll keep. 18 00:01:09,110 --> 00:01:11,600 I'm going to use the same logic about fetching user. 19 00:01:11,600 --> 00:01:14,210 So for function creation, we all know it. 20 00:01:14,210 --> 00:01:16,910 So let's go ahead and create a function. 21 00:01:16,910 --> 00:01:19,130 So going to be get user. 22 00:01:20,590 --> 00:01:21,430 Okay. 23 00:01:21,700 --> 00:01:22,270 Perfect. 24 00:01:22,270 --> 00:01:23,500 So here we go. 25 00:01:23,740 --> 00:01:29,350 So here because we are going to make this a promise because we don't know when we are going to get back 26 00:01:29,350 --> 00:01:30,160 the user. 27 00:01:30,340 --> 00:01:33,910 We need to make this promise inside this particular function. 28 00:01:34,030 --> 00:01:36,550 So here I'll make use of neon. 29 00:01:36,580 --> 00:01:41,520 Remember how we create a promise and as a function call. 30 00:01:41,530 --> 00:01:48,640 And for this function I pass in one agreement with my callback and I'm going to use arrow function here. 31 00:01:48,820 --> 00:01:54,370 So inside my callback, I have access to my resolve and then reject. 32 00:01:54,460 --> 00:01:55,030 Perfect. 33 00:01:55,030 --> 00:02:00,590 So here is our our logic goes here. 34 00:02:00,610 --> 00:02:04,390 Let's say logic goes here. 35 00:02:04,750 --> 00:02:12,850 So the same logic we use here let's is first to true and user to this object so I can bring this object 36 00:02:12,850 --> 00:02:13,960 inside here. 37 00:02:14,170 --> 00:02:17,070 So let's have the logic as before. 38 00:02:17,080 --> 00:02:21,130 Let's user is equal to my object. 39 00:02:21,480 --> 00:02:24,640 Going to be name which is John. 40 00:02:25,780 --> 00:02:31,510 And then the city of this person is from Accra. 41 00:02:32,380 --> 00:02:32,950 Perfect. 42 00:02:32,950 --> 00:02:40,240 So now let's have a condition that determines that our function is being called, which is is fetched, 43 00:02:40,270 --> 00:02:41,740 is equal to true. 44 00:02:41,800 --> 00:02:42,340 Perfect. 45 00:02:42,370 --> 00:02:43,570 Now let's save it. 46 00:02:43,810 --> 00:02:47,020 So let's make use of these methods here. 47 00:02:47,230 --> 00:02:48,940 Let's say resolve. 48 00:02:50,220 --> 00:02:52,290 And then reject. 49 00:02:52,320 --> 00:02:55,590 Now for this one, I believe you know how to use it. 50 00:02:55,590 --> 00:02:56,890 So now for resolve. 51 00:02:56,910 --> 00:03:00,590 Let's bring our resolve here and now for rejects. 52 00:03:00,600 --> 00:03:02,550 Let's also bring the reject here. 53 00:03:02,550 --> 00:03:08,390 So now let's conditionally I mean, retain one of these ones. 54 00:03:09,210 --> 00:03:10,160 Do we get it? 55 00:03:10,170 --> 00:03:11,460 Yes, we get it. 56 00:03:11,460 --> 00:03:21,600 So here we can say that if it's fetched, if is fetched, then we are going to call resolve. 57 00:03:22,860 --> 00:03:25,650 So for reject this function will be called. 58 00:03:25,650 --> 00:03:30,230 So here you can bring in errors or we can ignore it. 59 00:03:30,240 --> 00:03:34,320 So let's make it simple by bringing it inside our statement. 60 00:03:34,350 --> 00:03:35,370 All right. 61 00:03:35,370 --> 00:03:41,970 So now you want to see the actual user, so we pass in the user to my result for this one. 62 00:03:41,970 --> 00:03:45,690 There is no difference here the same thing as we did before. 63 00:03:45,690 --> 00:03:48,870 But for this one we are just wrapping it inside a function. 64 00:03:48,870 --> 00:03:50,160 That is why we see here. 65 00:03:50,160 --> 00:03:52,290 So here going to be the same thing. 66 00:03:52,290 --> 00:03:55,830 The difference here is about the outer function. 67 00:03:55,890 --> 00:04:00,330 Okay, so remember we talk about function as a first class citizen. 68 00:04:00,330 --> 00:04:01,740 Now here we go. 69 00:04:02,130 --> 00:04:08,670 We see that all what we need from this function is to retain what is coming back from this promise. 70 00:04:09,300 --> 00:04:15,390 Remember, a function can return and a function that's what you call function at first class citizen. 71 00:04:15,390 --> 00:04:15,900 Perfect. 72 00:04:15,900 --> 00:04:22,770 So here what comes back for this from this one is a promise whether for float or reject. 73 00:04:22,770 --> 00:04:30,450 So here we can assign the promise to a variable called promise and equal to that meaning. 74 00:04:30,450 --> 00:04:35,370 We need to return this promise, which is a function or result coming back from this one. 75 00:04:35,640 --> 00:04:40,110 So what comes back from this one is a value by instance, an object. 76 00:04:40,110 --> 00:04:48,900 So here, after this one, it means that after this one, we need to also call or retain the promise 77 00:04:48,900 --> 00:04:49,680 from this function. 78 00:04:49,680 --> 00:04:53,310 So here I will come down here and I will say return promise. 79 00:04:53,310 --> 00:04:55,950 So now we have a perfect syntax. 80 00:04:56,250 --> 00:04:59,100 So inside of this way we can even shorten it. 81 00:04:59,340 --> 00:05:04,770 That is, we assign a value to the, to this I mean promise here. 82 00:05:04,770 --> 00:05:10,020 And the next is we call down here so we can call it immediately by making some of this. 83 00:05:10,020 --> 00:05:14,640 So here we can remove this one and big and bring retain. 84 00:05:14,640 --> 00:05:15,810 So here we go. 85 00:05:15,840 --> 00:05:19,470 So now I can remove this one, which is equally as before. 86 00:05:19,470 --> 00:05:21,360 So the choice is yours. 87 00:05:21,540 --> 00:05:26,490 So if I call this function, I'm going to give me a promise. 88 00:05:26,490 --> 00:05:27,540 So check it out. 89 00:05:27,690 --> 00:05:34,140 So if I call this function, let's try to console.log this function and see. 90 00:05:34,140 --> 00:05:37,650 So const, let's say result. 91 00:05:39,110 --> 00:05:40,220 Equal to this. 92 00:05:40,230 --> 00:05:46,520 So if I console.log the results, I'll check it out. 93 00:05:46,640 --> 00:05:48,260 And we see that as before. 94 00:05:48,260 --> 00:05:50,690 Now we have something happening. 95 00:05:50,720 --> 00:05:54,620 As before we have a field and we have an object with this. 96 00:05:54,620 --> 00:05:57,620 So it's time to consume the promise. 97 00:05:57,770 --> 00:06:01,100 Which now brings us to this particular point. 98 00:06:01,100 --> 00:06:10,880 As I make mention that when returning a promise from a function, the function return a promise, that's 99 00:06:10,880 --> 00:06:12,170 what we see here. 100 00:06:12,570 --> 00:06:15,140 You see that the function is returning a promise. 101 00:06:15,680 --> 00:06:25,040 So the next point says that well and the value of the promise will be retained when the promise is resolved. 102 00:06:25,040 --> 00:06:27,500 Meaning we need to resolve this promise. 103 00:06:27,500 --> 00:06:30,840 And now you know how we resolve a promise, right? 104 00:06:30,860 --> 00:06:36,410 So now we make this off the get user. 105 00:06:37,220 --> 00:06:39,500 All right, get Utzon. 106 00:06:39,770 --> 00:06:45,240 And then as a function call assist, then dot, then remember. 107 00:06:45,260 --> 00:06:50,840 So here we pass in our callback function and then function as that. 108 00:06:50,930 --> 00:06:53,870 And here we have the data coming back. 109 00:06:53,870 --> 00:06:54,890 Or response. 110 00:06:55,490 --> 00:06:56,810 Let's say response. 111 00:06:57,940 --> 00:06:58,540 And then. 112 00:06:58,540 --> 00:06:59,320 Now. 113 00:06:59,650 --> 00:07:04,690 Now I can console.log the response or data if I save it. 114 00:07:04,720 --> 00:07:07,840 Now we have it as before. 115 00:07:09,160 --> 00:07:10,000 That is it. 116 00:07:10,000 --> 00:07:12,310 So what about if something goes wrong? 117 00:07:12,310 --> 00:07:12,700 Let's see. 118 00:07:12,700 --> 00:07:18,610 Now let's change this one to force to render our application to fail. 119 00:07:18,760 --> 00:07:24,250 So now we see that the same error on code error because we are not handling the error. 120 00:07:24,520 --> 00:07:26,220 So here the catch. 121 00:07:26,230 --> 00:07:33,010 Now I'm going to catch the error passing in my callback error here and here you go. 122 00:07:33,010 --> 00:07:37,320 Console.log, console.log, the error. 123 00:07:37,330 --> 00:07:39,700 And now let's see now undefined. 124 00:07:39,700 --> 00:07:43,120 Because for this reject you're not passing anything. 125 00:07:43,120 --> 00:07:44,380 Let's see that error. 126 00:07:46,160 --> 00:07:47,000 Fetching. 127 00:07:47,660 --> 00:07:48,440 User. 128 00:07:51,030 --> 00:07:51,590 Okay. 129 00:07:51,680 --> 00:07:52,550 Yes, save it. 130 00:07:52,550 --> 00:07:56,180 And now indeed we have error fetching user. 131 00:07:56,210 --> 00:07:57,830 So don't worry. 132 00:07:57,830 --> 00:08:04,910 If you get back to how to make HTTP call with JavaScript, all these things will make sense than just 133 00:08:04,910 --> 00:08:07,270 us being creative and mean. 134 00:08:07,280 --> 00:08:10,460 Try to mimic the way we are making HTTP calls here. 135 00:08:10,610 --> 00:08:19,100 So basically understand how fancy sorry a promise can be created and how we can resolve and reject. 136 00:08:19,100 --> 00:08:21,800 That is the most important thing about this section. 137 00:08:21,800 --> 00:08:25,910 As you move on, we are going to practice more in more rare use cases. 138 00:08:25,910 --> 00:08:30,170 So in the next video, we have one last topic to talk about. 139 00:08:30,170 --> 00:08:34,309 That is how we can consume multiple promises. 140 00:08:34,309 --> 00:08:35,240 All right. 141 00:08:35,240 --> 00:08:37,159 Let's get into that, the next video.