1
00:00:00,560 --> 00:00:03,010
Callbacks work fine for
asynchronous actions.

2
00:00:03,010 --> 00:00:04,990
But as we've seen, they can get messy and

3
00:00:04,990 --> 00:00:08,940
hard to follow pretty quickly once
you've started nesting callbacks.

4
00:00:08,940 --> 00:00:13,125
Promises do the same thing for us in a way
that tends to be more straight forward and

5
00:00:13,125 --> 00:00:14,465
easy to read.

6
00:00:14,465 --> 00:00:18,985
Promises allow us to clearly outline
the order in which things need to be done,

7
00:00:18,985 --> 00:00:22,865
by chaining functions together in
the order we wish them to execute,

8
00:00:22,865 --> 00:00:25,045
rather than nesting them
one inside of another.

9
00:00:26,425 --> 00:00:29,105
Remember, we're dealing
with eventualities here.

10
00:00:29,105 --> 00:00:33,640
Writing code to deal with info from a data
store whenever we happen to receive it.

11
00:00:33,640 --> 00:00:38,770
When this data becomes available, a
promise promises to do something with it.

12
00:00:38,770 --> 00:00:40,440
Let's see what that looks like.

13
00:00:40,440 --> 00:00:44,140
I'm going to copy and paste our previous
code, and delete the code inside.

14
00:00:51,084 --> 00:00:55,752
Remember to delete the callback,
I'll then comment out our previous code.

15
00:00:59,780 --> 00:01:04,213
Let's also add comments denoting that this
will be an example of using promises.

16
00:01:06,754 --> 00:01:11,820
Functions that return a promise give us
access to the then and catch methods.

17
00:01:11,820 --> 00:01:14,614
Inside the route,
I'll call the getUsers function and

18
00:01:14,614 --> 00:01:17,237
chain calls to the then method and
the catch method.

19
00:01:22,028 --> 00:01:26,200
These methods allow you to chain
different actions in a cleaner way.

20
00:01:26,200 --> 00:01:32,450
You're saying, almost in plain English,
run this function then do something else,

21
00:01:32,450 --> 00:01:36,670
then potentially do something else,
and even something else after that.

22
00:01:36,670 --> 00:01:40,670
And when you're done running your chain of
functions, any errors fall into the catch

23
00:01:40,670 --> 00:01:44,590
method, where you can handle
them in a more streamlined way.

24
00:01:44,590 --> 00:01:46,130
To be able to use then in catch,

25
00:01:46,130 --> 00:01:50,080
however, getUsers is going
to need to return a promise.

26
00:01:50,080 --> 00:01:54,487
Let's do that now, inside the getUsers
function we'll start by creating a new

27
00:01:54,487 --> 00:01:56,019
promise and returning it.

28
00:01:59,513 --> 00:02:02,727
The new promise takes a callback
to execute after it's created.

29
00:02:06,933 --> 00:02:11,325
Inside this callback, we need to
perform an asynchronous operation and

30
00:02:11,325 --> 00:02:14,709
define what should happen if
the action is successful,

31
00:02:14,709 --> 00:02:17,750
and what should if
the action isn't successful?

32
00:02:17,750 --> 00:02:20,980
To do that, the callback accepts
two parameters, resolve and reject.

33
00:02:26,086 --> 00:02:28,949
Inside the promise for
asynchronous operation,

34
00:02:28,949 --> 00:02:32,130
we can do something similar
to what we did before.

35
00:02:32,130 --> 00:02:36,804
First we need to read the data.json
file using Node's FS module.

36
00:02:48,390 --> 00:02:51,597
Inside the readFile methods callback
we'll again define the error and

37
00:02:51,597 --> 00:02:52,456
data parameters.

38
00:02:55,731 --> 00:02:59,591
If there's an error, we'll reject the
promise by calling the reject parameter

39
00:02:59,591 --> 00:03:01,019
method and pass in the error.

40
00:03:05,291 --> 00:03:09,456
Else if everything goes to plan,
we'll parse the JSON formatted data and

41
00:03:09,456 --> 00:03:11,480
send it to a variable called users.

42
00:03:16,669 --> 00:03:21,370
And by the way, we're doing this because
the readFile method gives us the data from

43
00:03:21,370 --> 00:03:24,820
the data.json file as a String,
so we need to parse to JSON.

44
00:03:24,820 --> 00:03:29,287
Now, instead of calling a callback
function we resolve the promise by calling

45
00:03:29,287 --> 00:03:32,139
the resolve parameter
method passing it to data.

46
00:03:36,059 --> 00:03:40,975
So we're saying here, when getUsers
is called, create a new promise,

47
00:03:40,975 --> 00:03:46,132
read the file, and if reading the file
isn't successful give us the error,

48
00:03:46,132 --> 00:03:49,588
and if it is successful gives us the data.

49
00:03:49,588 --> 00:03:53,210
Now the getUsers returns
a promise we can use the then and

50
00:03:53,210 --> 00:03:56,700
catch methods that are provided
to us on the promise object.

51
00:03:56,700 --> 00:04:00,129
The then method accepts a function, so
let's pass it an anonymous function.

52
00:04:03,652 --> 00:04:08,606
Inside this function we'll need to define
a parameter called users to gain access to

53
00:04:08,606 --> 00:04:11,180
the data provided by get users.

54
00:04:11,180 --> 00:04:15,150
Remember, we've programmed getUser so
that it either provides the data or

55
00:04:15,150 --> 00:04:15,920
provides an error.

56
00:04:17,560 --> 00:04:20,890
So we've called getUsers,
we have the users.

57
00:04:20,890 --> 00:04:21,706
Now we can render the page.

58
00:04:32,628 --> 00:04:37,242
Before we move on, let's save and
fire this up and make sure it's working.

59
00:04:39,767 --> 00:04:41,720
And it is, that's great.

60
00:04:41,720 --> 00:04:46,422
If the getUsers function encounters an
error, it'll be passed to the catch method

61
00:04:46,422 --> 00:04:49,866
which also accepts a callback
to run when errors are caught.

62
00:04:54,517 --> 00:04:57,571
We'll define a parameter for
the error and render the error page

63
00:05:05,514 --> 00:05:09,030
Let's use JavaScript's native error
constructor to throw a fake error in

64
00:05:09,030 --> 00:05:12,920
our then function to make sure
the user will see an error page.

65
00:05:12,920 --> 00:05:17,650
So up here,
we'll just quickly throw a new error.

66
00:05:21,416 --> 00:05:24,090
Let's check this out and
great, it's working.

67
00:05:25,180 --> 00:05:26,770
I'll go ahead and delete this error.

68
00:05:28,320 --> 00:05:31,860
So you see, instead of having
nested callback functions,

69
00:05:31,860 --> 00:05:36,590
we can instead chain then functions
to achieve different tasks.

70
00:05:36,590 --> 00:05:39,610
Remember the example we looked at
earlier of doing more than one

71
00:05:39,610 --> 00:05:43,680
asynchronous action, and
how messy it became using callbacks?

72
00:05:43,680 --> 00:05:44,780
See the teacher's notes for

73
00:05:44,780 --> 00:05:48,640
an example of what that code
might look like using promises.

74
00:05:48,640 --> 00:05:51,750
In the next video, we'll look at an
approach that's even more straightforward

75
00:05:51,750 --> 00:05:53,640
to follow, async and await.