1
00:00:00,139 --> 00:00:04,883
[MUSIC]

2
00:00:04,883 --> 00:00:09,625
JavaScript continues to provide new and
improved ways to do the exact same thing.

3
00:00:09,625 --> 00:00:12,501
Working with promise space
code is one of those things.

4
00:00:12,501 --> 00:00:16,853
So far you've experienced the progression
of asynchronous code from callbacks

5
00:00:16,853 --> 00:00:18,137
to promises and fetch.

6
00:00:18,137 --> 00:00:24,273
ES 2017 introduced async/await to further
simplify how you work with promises.

7
00:00:24,273 --> 00:00:27,268
In this stage,
you'll learn how the keywords Async and

8
00:00:27,268 --> 00:00:30,899
Await together provide a special
syntax to work with promises, and

9
00:00:30,899 --> 00:00:33,333
with that feels more intuitive and
concise.

10
00:00:33,333 --> 00:00:36,998
Async/await and promises are fundamentally
the same under the hood.

11
00:00:36,998 --> 00:00:41,844
So you should understand how promises
work before working with async/await.

12
00:00:41,844 --> 00:00:45,885
Now that you are familiar with using
promises, I'll quickly show you how

13
00:00:45,885 --> 00:00:49,355
async/await works then we'll
begin using it in our project.

14
00:00:49,355 --> 00:00:54,037
It all happens with two special
keywords async and await.

15
00:00:54,037 --> 00:00:57,517
The keyword async defines
an asynchronous function.

16
00:00:57,517 --> 00:01:00,963
You can mark any JavaScript
function with async like so.

17
00:01:00,963 --> 00:01:03,979
This function, for example,
is going to make a fetch request.

18
00:01:03,979 --> 00:01:09,420
Inside of an async function, you use
the await keyword to wait for a promise.

19
00:01:09,420 --> 00:01:11,833
The fetch method, for
instance, returns a promise.

20
00:01:11,833 --> 00:01:14,298
By placing await in front of fetch,

21
00:01:14,298 --> 00:01:18,749
the function is awaiting a resolved
promise returned by fetch.

22
00:01:18,749 --> 00:01:22,779
Once resolved, the fulfilled value,
which is the response object,

23
00:01:22,779 --> 00:01:25,043
is assigned to the variable response.

24
00:01:25,043 --> 00:01:28,144
The next step is to parse
the response to json.

25
00:01:28,144 --> 00:01:31,767
This task is also asynchronous and
returns a promise.

26
00:01:31,767 --> 00:01:37,349
So in parsing the response, include the
await keyword in front of response.json.

27
00:01:37,349 --> 00:01:42,232
Once the awaited promise is resolved the
json gets stored in the variable data, so

28
00:01:42,232 --> 00:01:44,299
data is returned by the function.

29
00:01:44,299 --> 00:01:48,338
The await keyword pauses the execution
of the async function and

30
00:01:48,338 --> 00:01:50,817
waits for the resolution of a promise.

31
00:01:50,817 --> 00:01:54,969
It then resumes execution and
returns the resolved value.

32
00:01:54,969 --> 00:01:58,889
Pausing the execution, however, is not
going to cause any blocking behavior.

33
00:01:58,889 --> 00:02:00,684
The JavaScript engine can run and

34
00:02:00,684 --> 00:02:03,704
execute other tasks in
the meantime via the event loop.

35
00:02:03,704 --> 00:02:08,562
And keep in mind that the await keyword
is valid only inside functions marked as

36
00:02:08,562 --> 00:02:09,087
async.

37
00:02:09,087 --> 00:02:13,201
If you use await outside of an async
function, you will get a syntax error.

38
00:02:13,201 --> 00:02:17,050
And notice how no then methods
are used to return a promise.

39
00:02:17,050 --> 00:02:19,241
Instead it looks like a regular function.

40
00:02:19,241 --> 00:02:21,659
That's where the power
of async await lies.

41
00:02:21,659 --> 00:02:25,550
It lets you write asynchronous
promise-based code that looks more like

42
00:02:25,550 --> 00:02:26,643
synchronous code.

43
00:02:26,643 --> 00:02:32,405
Also, it's important to remember that an
async function always returns a promise.

44
00:02:32,405 --> 00:02:36,814
That promise resolves with the value
the async function returns or

45
00:02:36,814 --> 00:02:40,527
rejects with an error thrown
from within the function.

46
00:02:40,527 --> 00:02:41,355
For example,

47
00:02:41,355 --> 00:02:45,363
the data returned by the fetchData
function is wrapped in a promise.

48
00:02:45,363 --> 00:02:49,731
One way to access the data is to chain
a then method onto the function call,

49
00:02:49,731 --> 00:02:53,970
just like you normally would when
working with promises or a fetchAPI.

50
00:02:53,970 --> 00:02:57,936
You're going to learn more about combining
async/await with promise chains,

51
00:02:57,936 --> 00:03:01,623
along with common ways to handle errors
when using async/await and more.

52
00:03:01,623 --> 00:03:03,979
Now that we've covered some of the basics,

53
00:03:03,979 --> 00:03:08,386
we'll begin converting many of our
project's promise chains to async/await.