1
00:00:00,380 --> 00:00:01,643
In the previous video,

2
00:00:01,643 --> 00:00:05,949
you learned how async-await simplifies
the process of working with promises.

3
00:00:05,949 --> 00:00:09,415
You are able to write you asynchronous
code in a way that resembles synchronous

4
00:00:09,415 --> 00:00:12,900
code, which in some ways might enhance
the readability and flow of your code.

5
00:00:12,900 --> 00:00:19,421
An async is just a function that returns
a promise, whether you use a wait or not.

6
00:00:19,421 --> 00:00:23,802
To demonstrate, I'll quickly comment out
everything inside the getPeopleInSpace

7
00:00:23,802 --> 00:00:26,202
function, including the await operations.

8
00:00:26,202 --> 00:00:31,207
Then console.log the function
call to getPeopleInSpace.

9
00:00:31,207 --> 00:00:35,635
In the console, you can see that the
function still returns a promise object,

10
00:00:35,635 --> 00:00:39,742
whose PromiseStatus is resolved and
it's PromiseValue is undefined.

11
00:00:39,742 --> 00:00:44,782
Now if the function returns a literal
value, like the URL passed to it,

12
00:00:44,782 --> 00:00:49,880
for example, you'll see it
returned as the PromiseValue.

13
00:00:49,880 --> 00:00:53,302
And if I uncomment the code
inside the function,

14
00:00:53,302 --> 00:00:57,150
you'll see the array of
objects as the PromiseValue.

15
00:00:57,150 --> 00:01:00,795
So because in async function
always returns a promise,

16
00:01:00,795 --> 00:01:06,000
it means that we're able to combine
async-await with traditional promises.

17
00:01:06,000 --> 00:01:09,803
Now async-await is not
meant to replace promises.

18
00:01:09,803 --> 00:01:14,337
Rather, it's syntactic sugar for creating
functions that return and wait for

19
00:01:14,337 --> 00:01:15,300
promises.

20
00:01:15,300 --> 00:01:17,921
So really it's a supplement to promises.

21
00:01:17,921 --> 00:01:21,294
So now I'll teach you how to use
a combination of promises and

22
00:01:21,294 --> 00:01:25,080
async-await to produce code that
might be a little more readable.

23
00:01:25,080 --> 00:01:26,862
We can call then, catch,

24
00:01:26,862 --> 00:01:31,250
and finally on getPeopleInSpace
to handle its return promise.

25
00:01:31,250 --> 00:01:37,526
For example, I'll delete the astros
variable and the await keyword, and

26
00:01:37,526 --> 00:01:44,610
chain a then method onto getPeopleInSpace
and pass it a reference to generate HTML.

27
00:01:44,610 --> 00:01:48,620
Now we can delete the call
to generate HTML.

28
00:01:48,620 --> 00:01:53,601
And next, I'll chain the finally method
to remove the button from the page

29
00:01:53,601 --> 00:01:56,380
after the data is fetched and processed.

30
00:01:56,380 --> 00:02:01,811
Like earlier, I'll pass finally a function
that returns event.target.remove.

31
00:02:08,170 --> 00:02:13,093
This function no longer makes use of
the await keyword, so I can delete

32
00:02:13,093 --> 00:02:18,780
the keyword async from the callback, and
this is going to work just like before.

33
00:02:21,900 --> 00:02:25,736
Now to me, the code in the event
listener feels more readable and

34
00:02:25,736 --> 00:02:28,804
makes the flow of the program
a little bit clearer.