1
00:00:00,000 --> 00:00:04,722
[MUSIC]

2
00:00:04,722 --> 00:00:10,212
When we were talking about services in
the previous module, I had mentioned

3
00:00:10,212 --> 00:00:16,070
about promises and then I promised that I
will return to promises in this module.

4
00:00:17,360 --> 00:00:20,360
So, here we are I'm going to
fulfill my promise to you.

5
00:00:22,090 --> 00:00:28,310
A synchronous computation is all over
the place in the world wide web.

6
00:00:28,310 --> 00:00:31,410
And how the web operates.

7
00:00:32,880 --> 00:00:35,810
If you are coming from
the sequential programming world,

8
00:00:37,040 --> 00:00:41,640
wrapping your head around a synchronous
computation takes quite a bit of effort.

9
00:00:42,680 --> 00:00:48,570
There have been many attempts at making
asynchronous computation as painless as

10
00:00:48,570 --> 00:00:54,680
possible for people transitioning into
it from the sequential computation book.

11
00:00:56,850 --> 00:01:01,470
One such attempt are to making
asynchronous computation

12
00:01:01,470 --> 00:01:04,790
easier to accomplish is promises.

13
00:01:06,040 --> 00:01:10,304
As we realize,
when we make any request to any

14
00:01:10,304 --> 00:01:15,220
service or to a backend server,

15
00:01:16,530 --> 00:01:21,180
it is going to take some time for
the results to become available for us.

16
00:01:22,550 --> 00:01:30,840
If we do such a request while
we are proceeding with our work,

17
00:01:30,840 --> 00:01:35,680
then there is a high likelihood that our
computation will get stuck at the point,

18
00:01:35,680 --> 00:01:37,890
waiting for the results.

19
00:01:37,890 --> 00:01:44,070
This is a no-no in terms of
doing a good user experience.

20
00:01:46,090 --> 00:01:52,420
So it is important that whenever
your results are going to take time

21
00:01:52,420 --> 00:01:57,660
you should be able to proceed forward
without waiting for the rules.

22
00:01:57,660 --> 00:02:01,492
And that is where asynchronous
computation comes to your advantage.

23
00:02:01,492 --> 00:02:04,640
In asynchronous computation
when you send out a request

24
00:02:04,640 --> 00:02:07,800
you are expecting the results to
come back at a later time, and

25
00:02:07,800 --> 00:02:12,720
you should be able to deal with the fact,
the base results come back at a time

26
00:02:14,490 --> 00:02:20,410
much later than where you were at
the point when you made the request.

27
00:02:21,830 --> 00:02:25,710
Promises provide us with
a way of dealing with this.

28
00:02:26,790 --> 00:02:32,540
Let's look at promises in a little
more detail in this lecture.

29
00:02:32,540 --> 00:02:35,910
And then we will also
see the use of promises

30
00:02:35,910 --> 00:02:39,490
in our Angular application
a little bit later.

31
00:02:39,490 --> 00:02:44,750
Promises, the general concept
is a very vast area by itself.

32
00:02:44,750 --> 00:02:49,030
And in this course, I don't have time
to go through the details of promises.

33
00:02:49,030 --> 00:02:51,780
That'll become an entire course in itself.

34
00:02:51,780 --> 00:02:56,950
I will give you just the essentials
of promises that are necessary for

35
00:02:56,950 --> 00:03:02,490
us to understand how to make use of
promises within our angular application.

36
00:03:02,490 --> 00:03:07,230
I do provide you with a lot
of leads to additional

37
00:03:07,230 --> 00:03:11,380
resources where you can go and
examine promises in more detail.

38
00:03:13,110 --> 00:03:17,230
So coming down to that question,
what exactly is a promise?

39
00:03:17,230 --> 00:03:21,690
A promise is a mechanism that
supports asynchronous computation.

40
00:03:21,690 --> 00:03:26,580
I just gave a long winded explanation
of why asynchronous computation

41
00:03:26,580 --> 00:03:31,340
is essential for the web to function.

42
00:03:31,340 --> 00:03:36,720
Now, in using a promise,
the promise provides a mechanism or

43
00:03:36,720 --> 00:03:42,760
a proxy for a value that is not available
at the moment that you ask for it.

44
00:03:42,760 --> 00:03:46,050
So a promise will return a promise to you,
saying that

45
00:03:46,050 --> 00:03:51,430
when the result becomes available, it'll
come back and deliver the results to you.

46
00:03:51,430 --> 00:03:56,850
So a promise returns a proxy object to
you, and you hold on to the proxy object.

47
00:03:56,850 --> 00:04:02,030
And that proxy object will give you access
to the results when they become available.

48
00:04:02,030 --> 00:04:07,290
And there is a method in how you wait for
the results.

49
00:04:07,290 --> 00:04:11,560
You actually don't suspend your
computation at that point instead you

50
00:04:13,110 --> 00:04:19,948
configure a way of accepting the results
when it comes back from that promise.

51
00:04:19,948 --> 00:04:23,780
To put it in a nutshell,

52
00:04:23,780 --> 00:04:27,960
promise represents a value that
will be available at a future time.

53
00:04:27,960 --> 00:04:29,680
It may be also immediately available,

54
00:04:29,680 --> 00:04:32,960
in which case the promise will
return the value immediately.

55
00:04:32,960 --> 00:04:37,940
But in case it needs to return a value
at a future date, then it gives you

56
00:04:37,940 --> 00:04:42,040
the promise that that value when it
becomes available will be returned to you.

57
00:04:43,400 --> 00:04:47,820
There is always the possibility
that the promise cannot be met,

58
00:04:47,820 --> 00:04:50,730
because the results are unavailable for
whatever reason.

59
00:04:51,950 --> 00:04:57,150
In that case, an error will be delivered
to you, or a reject will be delivered

60
00:04:57,150 --> 00:05:02,430
to you, and it is up to you to deal with
the fact that the promise was rejected.

61
00:05:03,930 --> 00:05:06,890
We look at how we deal with
that in the next slide.

62
00:05:07,950 --> 00:05:11,180
As we learned earlier,
a promise is a proxy for

63
00:05:11,180 --> 00:05:15,080
something that was going to happen in the
future or may never happen in the future.

64
00:05:15,080 --> 00:05:19,745
So a promise when it is given to you,
will be in the pending state.

65
00:05:20,860 --> 00:05:25,130
Now when the promise resolves,
that is the results become available and

66
00:05:25,130 --> 00:05:30,080
the promise is able to deliver the results
to you, then the promise will resolve or

67
00:05:30,080 --> 00:05:31,490
will fulfill.

68
00:05:31,490 --> 00:05:37,130
And in that case the promise will move
from the pending state to the resolve or

69
00:05:37,130 --> 00:05:38,490
the fulfill state.

70
00:05:38,490 --> 00:05:41,220
So at that point your
results are available to you.

71
00:05:42,540 --> 00:05:48,760
There is a slight chance that the promise
may be rejected because of an error,

72
00:05:48,760 --> 00:05:50,590
or whatever be the reason.

73
00:05:50,590 --> 00:05:53,280
In that remote circumstance,

74
00:05:53,280 --> 00:05:57,980
you will be delivered a reject and
in that case, the promise will be

75
00:05:57,980 --> 00:06:02,209
considered to be in the rejected
state when the reject is delivered.

76
00:06:03,380 --> 00:06:06,710
So, when you generate a promise,
as I said,

77
00:06:06,710 --> 00:06:10,560
a promise is a proxy object
that is delivered to you.

78
00:06:10,560 --> 00:06:14,580
So, when you deliver a promise to
somebody, the promise internally will have

79
00:06:14,580 --> 00:06:17,500
a function that will deal
with both the resolve and

80
00:06:17,500 --> 00:06:20,310
the reject options inside there.

81
00:06:21,480 --> 00:06:22,540
When you write code,

82
00:06:22,540 --> 00:06:28,190
you will see that you'll write code as
new Promise ( function (resolve, reject).

83
00:06:28,190 --> 00:06:33,350
So whether it resolves or it gets
rejected, we need to be able to send

84
00:06:33,350 --> 00:06:38,290
back the information to whoever
we delivered the promise to.

85
00:06:39,570 --> 00:06:41,600
How do we do this in code?

86
00:06:41,600 --> 00:06:44,040
Let's take a look at
that in the next slide.

87
00:06:45,280 --> 00:06:50,430
Here is an example of how
promise is configured in code.

88
00:06:50,430 --> 00:06:53,870
Indeed, this example is derived
from the exercise that you will do

89
00:06:53,870 --> 00:06:55,850
a little bit later.

90
00:06:55,850 --> 00:07:01,100
So here, when we configure our service,
we can have our service

91
00:07:01,100 --> 00:07:06,830
return a promise to a component that
requests for data from the service.

92
00:07:06,830 --> 00:07:08,368
So when the promise is returned,

93
00:07:08,368 --> 00:07:13,810
then the return promise is
available to you as an object.

94
00:07:13,810 --> 00:07:18,190
And this promise provides two methods,
the then and the catch method.

95
00:07:19,420 --> 00:07:23,416
Now, then,
the promise is successfully resolved.

96
00:07:23,416 --> 00:07:28,300
Then the promise will result

97
00:07:28,300 --> 00:07:32,810
in calling a resolve.

98
00:07:32,810 --> 00:07:36,960
As you saw, the promise is constructed,
and inside the promise,

99
00:07:36,960 --> 00:07:42,170
you have the function, the resolve,
and reject, as the two parameters.

100
00:07:42,170 --> 00:07:46,820
So if the promise is successfully
able to deliver the result,

101
00:07:46,820 --> 00:07:51,680
then it'll call the resolve method and
then return the result to you.

102
00:07:51,680 --> 00:07:53,520
Where does the result get reality?

103
00:07:54,820 --> 00:07:58,820
When you write code waiting for

104
00:07:58,820 --> 00:08:04,400
the promise then you would specify what
to do when the promise returns the result

105
00:08:04,400 --> 00:08:09,370
in the then option for that promise.

106
00:08:09,370 --> 00:08:14,590
So say for example, you would say
getDishes.then and inside of then

107
00:08:14,590 --> 00:08:18,810
you would supply the function that will
deal with the result when it comes in.

108
00:08:20,370 --> 00:08:25,700
If the promise is not able to
resolve correctly then it'll reject

109
00:08:25,700 --> 00:08:28,570
with the error being sent back to you.

110
00:08:28,570 --> 00:08:31,600
The error being an error object
that'll be sent back to you.

111
00:08:31,600 --> 00:08:36,560
So when their promise get rejected,
then you deal with

112
00:08:36,560 --> 00:08:41,020
the rejection using
a catch within your code.

113
00:08:41,020 --> 00:08:47,460
So within the catch, you will provide
a function that will deal with the error.

114
00:08:47,460 --> 00:08:51,470
For example,
you may simply output the error message,

115
00:08:51,470 --> 00:08:56,770
the console log and
deal with the error that way.

116
00:08:56,770 --> 00:09:01,080
Or you might have a more elaborate
way of handling the error.

117
00:09:01,080 --> 00:09:06,670
That would be provided in the catch option
that you give for that promise code

118
00:09:06,670 --> 00:09:12,130
on your side when the promise
delivers a reject to you.

119
00:09:12,130 --> 00:09:17,690
So this is how the two sides of
the coin deal with promises.

120
00:09:17,690 --> 00:09:21,160
From one side,
you are sent a promise object, and

121
00:09:21,160 --> 00:09:24,730
when you receive the promise object, with
the promise object, you would either do

122
00:09:24,730 --> 00:09:28,300
the then and the catch, so you're
supposed to implement both the then and

123
00:09:28,300 --> 00:09:33,510
the catch metrics changed
to that promise object.

124
00:09:34,780 --> 00:09:39,910
And then, from that promise aside,
if the promise results correctly,

125
00:09:39,910 --> 00:09:44,757
then the resolve will be called and
thereby, the result will be delivered

126
00:09:44,757 --> 00:09:48,770
in the then method of your promise.

127
00:09:48,770 --> 00:09:51,175
If the promise gets rejected,

128
00:09:51,175 --> 00:09:55,530
the reject call will deliver
the error into your catch.

129
00:09:56,760 --> 00:10:01,725
So this is how you would
implement code using promises.

130
00:10:01,725 --> 00:10:07,375
We will deal with the example in
the exercise that follows this lecture.

131
00:10:07,375 --> 00:10:09,786
Now obviously the question
I ask is why promises?

132
00:10:11,347 --> 00:10:13,927
Later on, when we deal with Node JS,

133
00:10:13,927 --> 00:10:18,237
we will deal with how we
can construct callbacks.

134
00:10:18,237 --> 00:10:21,677
And I will explain the details of
callbacks and the way to deal with

135
00:10:21,677 --> 00:10:29,920
callbacks when we cover the Node JS in
the last course of this specialization.

136
00:10:29,920 --> 00:10:37,400
Callbacks have a problem of creating
what to is referred to as callback hell.

137
00:10:37,400 --> 00:10:40,000
So you have heavily nested callback code

138
00:10:40,000 --> 00:10:44,650
that is very complicated to be able to
figure out what it is trying to do.

139
00:10:44,650 --> 00:10:50,970
Promises provide a way of addressing
this callback hell problem.

140
00:10:50,970 --> 00:10:55,270
But for the moment we are concentrating
on Angular, I'll just mention this point.

141
00:10:55,270 --> 00:10:59,050
And then we'll come back to deal with
this question in the last course.

142
00:11:00,760 --> 00:11:05,600
The other advantage of using promises
is that promises can be changed.

143
00:11:05,600 --> 00:11:08,780
A promise when it delivers
the result in the bin,

144
00:11:08,780 --> 00:11:11,130
you can generate another promise and
return, and

145
00:11:11,130 --> 00:11:16,280
that promise can be dealt with by chaining
another then method to that and so on.

146
00:11:16,280 --> 00:11:21,720
So you can chain a set of then
methods together to deal with

147
00:11:21,720 --> 00:11:23,470
promises one behind other.

148
00:11:25,610 --> 00:11:31,850
If the result is immediately available or
if you are going to reject immediately,

149
00:11:31,850 --> 00:11:37,190
then promise provides a method of
immediately returning without waiting for

150
00:11:37,190 --> 00:11:39,900
the promise to either resolve or reject.

151
00:11:39,900 --> 00:11:45,766
In that case, you will simply say
promise with a capital P.resolve and

152
00:11:45,766 --> 00:11:52,243
Promise.reject and then return either
the result or the error immediately.

153
00:11:52,243 --> 00:11:57,079
In the first exercise, we will deal
with this method of returning the value

154
00:11:57,079 --> 00:11:59,480
from our service to our components.

155
00:12:00,920 --> 00:12:04,010
In the second part of exercise,
we will deal with

156
00:12:04,010 --> 00:12:09,820
the situation where the promise
will resolve after a time duration.

157
00:12:09,820 --> 00:12:13,400
And also within our component, we should
be able to deal with the fact that

158
00:12:13,400 --> 00:12:20,280
the results come back a little bit
later than when you ask for the result.

159
00:12:22,485 --> 00:12:25,679
With this quick understanding of promises,

160
00:12:25,679 --> 00:12:30,393
let's go on to the next exercise
where we will deal with promises.

161
00:12:30,393 --> 00:12:33,769
[MUSIC]