1 00:00:03,830 --> 00:00:09,840 Following the short introduction to promises in the previous lecture, 2 00:00:09,840 --> 00:00:12,270 let's move on to our next exercise where we will 3 00:00:12,270 --> 00:00:15,235 make use of promises within our angular application. 4 00:00:15,235 --> 00:00:24,060 In particular, promises are essential way of dealing with the delays especially when 5 00:00:24,060 --> 00:00:27,885 you're needing to access and obtain the data from a server 6 00:00:27,885 --> 00:00:32,915 before being delivered to the component through your service. 7 00:00:32,915 --> 00:00:36,440 So, services often return promises to 8 00:00:36,440 --> 00:00:41,050 the components when the components call the service methods, 9 00:00:41,050 --> 00:00:43,490 and thereafter when the promise 10 00:00:43,490 --> 00:00:47,385 resolves then the components will have the results available to them. 11 00:00:47,385 --> 00:00:51,920 We will reconfigure the services that we have within 12 00:00:51,920 --> 00:00:55,970 our angular application to return 13 00:00:55,970 --> 00:00:58,550 promises and then we will reconfigure 14 00:00:58,550 --> 00:01:02,390 our components to be able to deal with the promises. 15 00:01:02,390 --> 00:01:10,925 Our first step in this exercise is to reconfigure all the services to return promises. 16 00:01:10,925 --> 00:01:14,704 So each of the methods within our service instead of returning 17 00:01:14,704 --> 00:01:18,500 the value immediately it will return promises. 18 00:01:18,500 --> 00:01:21,685 So, how do we configure our services to return promises? 19 00:01:21,685 --> 00:01:26,635 So, going to the dishservice.ts file, 20 00:01:26,635 --> 00:01:35,390 the getDishes method here will return a promise instead of the dish array. 21 00:01:35,390 --> 00:01:38,840 So, we configure the getDishes method to return 22 00:01:38,840 --> 00:01:43,695 promise by enclosing this dish object inside a promise. 23 00:01:43,695 --> 00:01:49,235 What this means is that if the promise resolves then the result delivered 24 00:01:49,235 --> 00:01:55,435 by the getDishes promise would be a dish array. 25 00:01:55,435 --> 00:01:59,164 So, within your component 26 00:01:59,164 --> 00:02:03,290 you will receive the dish array if the promise results correctly. 27 00:02:03,290 --> 00:02:07,845 Now that we have configured the getDishes to return a promise, 28 00:02:07,845 --> 00:02:10,370 we need to reconfigure the code so 29 00:02:10,370 --> 00:02:14,735 that this dishes array will be returned as part of a promise. 30 00:02:14,735 --> 00:02:18,770 Now since we have the result already available to us, 31 00:02:18,770 --> 00:02:22,190 I'm going to use the shortcut method of 32 00:02:22,190 --> 00:02:27,875 returning the promise by resolving the promise immediately. 33 00:02:27,875 --> 00:02:34,720 Now obviously, this works well if you have the results immediately available with you. 34 00:02:34,720 --> 00:02:38,120 But, when you reconfigure your service to 35 00:02:38,120 --> 00:02:41,885 be able to go and fetch this data from a server, 36 00:02:41,885 --> 00:02:46,670 then we will have to rewrite this code to deal with the fact that 37 00:02:46,670 --> 00:02:49,310 the service will not return the result 38 00:02:49,310 --> 00:02:52,875 immediately instead you will have to wait for some time. 39 00:02:52,875 --> 00:02:54,430 In the next exercise, 40 00:02:54,430 --> 00:03:03,290 we're going to simulate the delay by using a JavaScript method so that it gives you 41 00:03:03,290 --> 00:03:12,875 a feel of what it means to deal with delays in receiving a result from a promise. 42 00:03:12,875 --> 00:03:16,865 Now that we have configured the getDishes to return the promise, 43 00:03:16,865 --> 00:03:20,770 similarly, we will reconfigure the remaining two methods. 44 00:03:20,770 --> 00:03:24,890 So I'm going to copy this promise from 45 00:03:24,890 --> 00:03:30,430 here and then simply attach this to the remaining two there, 46 00:03:30,430 --> 00:03:34,220 so that I will convert them also to return 47 00:03:34,220 --> 00:03:37,100 promises and then of course whatever we 48 00:03:37,100 --> 00:03:40,225 have here should be enclosed inside the promise resolve. 49 00:03:40,225 --> 00:03:43,129 So I'm just going to copy the promise resolve 50 00:03:43,129 --> 00:03:50,675 and enclose this inside the resolve here. 51 00:03:50,675 --> 00:04:00,080 Similarly, for the featured dish I will enclose this inside the promise resolve. 52 00:04:00,080 --> 00:04:05,005 Now, my dish service is configured to return promises. 53 00:04:05,005 --> 00:04:07,610 Obviously, this also means that I need to go to 54 00:04:07,610 --> 00:04:11,360 my components and then reconfigure the components to be able to deal 55 00:04:11,360 --> 00:04:14,090 with the fact that they are not receiving the data 56 00:04:14,090 --> 00:04:17,720 immediately instead they are receiving a promise and then they 57 00:04:17,720 --> 00:04:21,200 will have to implement the then method within 58 00:04:21,200 --> 00:04:25,550 which the promise when it results will deliver the data to you. 59 00:04:25,550 --> 00:04:28,639 So, now that we have configured the dish service, 60 00:04:28,639 --> 00:04:35,020 we know one place where the service is actively being used and that is menu component. 61 00:04:35,020 --> 00:04:37,730 So let me show you how we will reconfigure 62 00:04:37,730 --> 00:04:40,640 the component to be able to deal with the promise. 63 00:04:40,640 --> 00:04:44,420 So when you go to the menucomponent.ts you will immediately 64 00:04:44,420 --> 00:04:49,984 notice that there is a red squiggly line under dishes because, 65 00:04:49,984 --> 00:04:51,880 as you see, now, 66 00:04:51,880 --> 00:04:58,875 the dishservice.getDishes is returning a promise and then here you have, 67 00:04:58,875 --> 00:05:05,660 the promise being assigned to a dish array object and this is not correct. 68 00:05:05,660 --> 00:05:08,005 How do we reconfigure this code? 69 00:05:08,005 --> 00:05:09,559 So, as I mentioned, 70 00:05:09,559 --> 00:05:11,440 when we reconfigure the code, 71 00:05:11,440 --> 00:05:16,100 we need to implement the then and the catch for the getDishes. 72 00:05:16,100 --> 00:05:20,820 So, let me go ahead and implement just the then at this moment, 73 00:05:20,820 --> 00:05:27,360 for the getDishes method because the catch can be implemented later. 74 00:05:27,360 --> 00:05:31,190 Right now we know that the promise will always resolve correctly, 75 00:05:31,190 --> 00:05:33,665 so we will implement the then method here, 76 00:05:33,665 --> 00:05:36,645 and then, inside the then method, 77 00:05:36,645 --> 00:05:46,650 I will receive the dishes object coming in when the promise resolves. 78 00:05:46,650 --> 00:05:50,400 And when that is dishes object comes in as a parameter, 79 00:05:50,400 --> 00:05:53,190 so you see that I am writing an arrow function here, 80 00:05:53,190 --> 00:06:03,120 I'm just going to cut that out and include that right there. 81 00:06:03,170 --> 00:06:09,510 There you go. This is how your component can now 82 00:06:09,510 --> 00:06:16,775 take hold of the promise and then retrieve the results when the promise gets resolved. 83 00:06:16,775 --> 00:06:21,575 You can see that we have the dishService getDishes and then the then method 84 00:06:21,575 --> 00:06:26,560 change to it and whereby when the then is called, 85 00:06:26,560 --> 00:06:28,880 when the promise resolves from the other side, 86 00:06:28,880 --> 00:06:33,635 then the dishes will be delivered to you because the getDishes method 87 00:06:33,635 --> 00:06:38,450 is returning a promise but the result will be a dish array. 88 00:06:38,450 --> 00:06:42,320 That dish array comes in as a parameter here so I'm writing an arrow function 89 00:06:42,320 --> 00:06:46,880 here where I am assigning that this dishes to dishes. 90 00:06:46,880 --> 00:06:49,880 So, when this promise resolves then the dishes will 91 00:06:49,880 --> 00:06:53,930 be assigned to this dishes. That's it. 92 00:06:53,930 --> 00:06:57,455 Now my menu component is ready to deal with the promise. 93 00:06:57,455 --> 00:07:01,715 Of course, to deal with the error you also need to 94 00:07:01,715 --> 00:07:06,130 chain the catch method into the getDishes method. 95 00:07:06,130 --> 00:07:08,390 So, the then and the catch are methods that 96 00:07:08,390 --> 00:07:11,540 the promise provides for you and so you implement that and within 97 00:07:11,540 --> 00:07:16,790 which you will provide the function that deals with 98 00:07:16,790 --> 00:07:23,355 the situation when the promise resolves or when the promise rejects with an error. 99 00:07:23,355 --> 00:07:28,850 Now similarly, we should reconfigure the dish detail method 100 00:07:28,850 --> 00:07:33,890 and also the home component to deal with the fact that 101 00:07:33,890 --> 00:07:44,520 the dishService is now delivering promises rather than delivering the values immediately. 102 00:07:44,520 --> 00:07:46,470 While we are at it, 103 00:07:46,470 --> 00:07:51,305 we might as well reconfigure both the leader and the promotion service also. 104 00:07:51,305 --> 00:07:55,100 So I will leave it as an exercise for you to complete, 105 00:07:55,120 --> 00:07:59,930 updating both the leader service and the promotion service to be able 106 00:07:59,930 --> 00:08:05,180 to deliver the corresponding promises. 107 00:08:05,180 --> 00:08:09,379 Also, consequently, you will have to reconfigure 108 00:08:09,379 --> 00:08:18,785 the component type script code in the about component in the dish detail component, 109 00:08:18,785 --> 00:08:23,360 in the home component to deal with the fact that you are 110 00:08:23,360 --> 00:08:27,950 now receiving promises rather than the actual results. 111 00:08:27,950 --> 00:08:34,005 So i will let you complete that part instead of illustrating all that in detail, 112 00:08:34,005 --> 00:08:37,620 I have shown you one step with the dish detail component. 113 00:08:37,620 --> 00:08:42,380 Please complete the steps with both the leader and the promotion service, 114 00:08:42,380 --> 00:08:45,890 and then configure the corresponding components accordingly. 115 00:08:45,890 --> 00:08:50,275 Let me quickly walk you through the updates that you need to complete. 116 00:08:50,275 --> 00:08:56,365 So as you see the leaders service I have updated already with the promise. 117 00:08:56,365 --> 00:08:57,585 As you can see here, 118 00:08:57,585 --> 00:09:00,410 all the methods now have been updated to return 119 00:09:00,410 --> 00:09:04,800 promises just like the way we did with the dishService. 120 00:09:04,800 --> 00:09:08,420 Similarly, the promotion services also updated to 121 00:09:08,420 --> 00:09:12,660 return promises from all the methods there. 122 00:09:12,660 --> 00:09:16,560 Now, going to the about component, 123 00:09:16,560 --> 00:09:22,160 you would see that in the about component also we have configured to 124 00:09:22,160 --> 00:09:28,790 receive the values within the then of the promise there. 125 00:09:28,790 --> 00:09:33,560 Similarly, in the dish detail component you would notice that I have 126 00:09:33,560 --> 00:09:39,765 reconfigured this to deal with the promise there. 127 00:09:39,765 --> 00:09:43,495 Similarly, in the home component, 128 00:09:43,495 --> 00:09:46,190 you would notice that within the home component 129 00:09:46,190 --> 00:09:51,740 all the three methods here: getFeaturedDish, 130 00:09:51,740 --> 00:09:54,650 featuredPromotion, and featuredLeader have been updated, 131 00:09:54,650 --> 00:09:59,330 with the then attached to each one of them to deal with the promise. 132 00:09:59,330 --> 00:10:06,355 The code is pretty much similar to what I have illustrated with the menu component. 133 00:10:06,355 --> 00:10:08,570 Once you complete this, 134 00:10:08,570 --> 00:10:12,995 let's take a quick look at our application. 135 00:10:12,995 --> 00:10:15,665 Going to our application in the browser, 136 00:10:15,665 --> 00:10:18,870 you won't see any difference in the application. 137 00:10:18,870 --> 00:10:21,409 It works exactly the same way as before, 138 00:10:21,409 --> 00:10:26,385 except now it is using promises when 139 00:10:26,385 --> 00:10:29,615 the services are implemented and your components 140 00:10:29,615 --> 00:10:33,080 are dealing with the promises when they are resolved. 141 00:10:33,080 --> 00:10:36,530 So the menu component working correctly and 142 00:10:36,530 --> 00:10:40,440 also the dish detail component also working correctly. 143 00:10:40,440 --> 00:10:43,150 With this, we complete this exercise. 144 00:10:43,150 --> 00:10:49,130 In this exercise, we saw how we were able to upgrade our services to 145 00:10:49,130 --> 00:10:55,990 deliver promises and we also updated our components to be able to deal with promises. 146 00:10:55,990 --> 00:10:58,710 This completes this exercise. 147 00:10:58,710 --> 00:11:06,300 This is a good time for you to do a git commit with the message 'Promise part one'.