Following the short introduction to promises in the previous lecture,
let's move on to our next exercise where we will
make use of promises within our angular application.
In particular, promises are essential way of dealing with the delays especially when
you're needing to access and obtain the data from a server
before being delivered to the component through your service.
So, services often return promises to
the components when the components call the service methods,
and thereafter when the promise
resolves then the components will have the results available to them.
We will reconfigure the services that we have within
our angular application to return
promises and then we will reconfigure
our components to be able to deal with the promises.
Our first step in this exercise is to reconfigure all the services to return promises.
So each of the methods within our service instead of returning
the value immediately it will return promises.
So, how do we configure our services to return promises?
So, going to the dishservice.ts file,
the getDishes method here will return a promise instead of the dish array.
So, we configure the getDishes method to return
promise by enclosing this dish object inside a promise.
What this means is that if the promise resolves then the result delivered
by the getDishes promise would be a dish array.
So, within your component
you will receive the dish array if the promise results correctly.
Now that we have configured the getDishes to return a promise,
we need to reconfigure the code so
that this dishes array will be returned as part of a promise.
Now since we have the result already available to us,
I'm going to use the shortcut method of
returning the promise by resolving the promise immediately.
Now obviously, this works well if you have the results immediately available with you.
But, when you reconfigure your service to
be able to go and fetch this data from a server,
then we will have to rewrite this code to deal with the fact that
the service will not return the result
immediately instead you will have to wait for some time.
In the next exercise,
we're going to simulate the delay by using a JavaScript method so that it gives you
a feel of what it means to deal with delays in receiving a result from a promise.
Now that we have configured the getDishes to return the promise,
similarly, we will reconfigure the remaining two methods.
So I'm going to copy this promise from
here and then simply attach this to the remaining two there,
so that I will convert them also to return
promises and then of course whatever we
have here should be enclosed inside the promise resolve.
So I'm just going to copy the promise resolve
and enclose this inside the resolve here.
Similarly, for the featured dish I will enclose this inside the promise resolve.
Now, my dish service is configured to return promises.
Obviously, this also means that I need to go to
my components and then reconfigure the components to be able to deal
with the fact that they are not receiving the data
immediately instead they are receiving a promise and then they
will have to implement the then method within
which the promise when it results will deliver the data to you.
So, now that we have configured the dish service,
we know one place where the service is actively being used and that is menu component.
So let me show you how we will reconfigure
the component to be able to deal with the promise.
So when you go to the menucomponent.ts you will immediately
notice that there is a red squiggly line under dishes because,
as you see, now,
the dishservice.getDishes is returning a promise and then here you have,
the promise being assigned to a dish array object and this is not correct.
How do we reconfigure this code?
So, as I mentioned,
when we reconfigure the code,
we need to implement the then and the catch for the getDishes.
So, let me go ahead and implement just the then at this moment,
for the getDishes method because the catch can be implemented later.
Right now we know that the promise will always resolve correctly,
so we will implement the then method here,
and then, inside the then method,
I will receive the dishes object coming in when the promise resolves.
And when that is dishes object comes in as a parameter,
so you see that I am writing an arrow function here,
I'm just going to cut that out and include that right there.
There you go. This is how your component can now
take hold of the promise and then retrieve the results when the promise gets resolved.
You can see that we have the dishService getDishes and then the then method
change to it and whereby when the then is called,
when the promise resolves from the other side,
then the dishes will be delivered to you because the getDishes method
is returning a promise but the result will be a dish array.
That dish array comes in as a parameter here so I'm writing an arrow function
here where I am assigning that this dishes to dishes.
So, when this promise resolves then the dishes will
be assigned to this dishes. That's it.
Now my menu component is ready to deal with the promise.
Of course, to deal with the error you also need to
chain the catch method into the getDishes method.
So, the then and the catch are methods that
the promise provides for you and so you implement that and within
which you will provide the function that deals with
the situation when the promise resolves or when the promise rejects with an error.
Now similarly, we should reconfigure the dish detail method
and also the home component to deal with the fact that
the dishService is now delivering promises rather than delivering the values immediately.
While we are at it,
we might as well reconfigure both the leader and the promotion service also.
So I will leave it as an exercise for you to complete,
updating both the leader service and the promotion service to be able
to deliver the corresponding promises.
Also, consequently, you will have to reconfigure
the component type script code in the about component in the dish detail component,
in the home component to deal with the fact that you are
now receiving promises rather than the actual results.
So i will let you complete that part instead of illustrating all that in detail,
I have shown you one step with the dish detail component.
Please complete the steps with both the leader and the promotion service,
and then configure the corresponding components accordingly.
Let me quickly walk you through the updates that you need to complete.
So as you see the leaders service I have updated already with the promise.
As you can see here,
all the methods now have been updated to return
promises just like the way we did with the dishService.
Similarly, the promotion services also updated to
return promises from all the methods there.
Now, going to the about component,
you would see that in the about component also we have configured to
receive the values within the then of the promise there.
Similarly, in the dish detail component you would notice that I have
reconfigured this to deal with the promise there.
Similarly, in the home component,
you would notice that within the home component
all the three methods here: getFeaturedDish,
featuredPromotion, and featuredLeader have been updated,
with the then attached to each one of them to deal with the promise.
The code is pretty much similar to what I have illustrated with the menu component.
Once you complete this,
let's take a quick look at our application.
Going to our application in the browser,
you won't see any difference in the application.
It works exactly the same way as before,
except now it is using promises when
the services are implemented and your components
are dealing with the promises when they are resolved.
So the menu component working correctly and
also the dish detail component also working correctly.
With this, we complete this exercise.
In this exercise, we saw how we were able to upgrade our services to
deliver promises and we also updated our components to be able to deal with promises.
This completes this exercise.
This is a good time for you to do a git commit with the message 'Promise part one'.