Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how the keywords async and await, together, provide a special syntax to work with promises in a way that feels more intuitive and concise.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
JavaScript continues to provide new and
improved ways to do the exact same thing.
0:04
Working with promise space
code is one of those things.
0:09
So far you've experienced the progression
of asynchronous code from callbacks
0:12
to promises and fetch.
0:16
ES 2017 introduced async/await to further
simplify how you work with promises.
0:18
In this stage,
you'll learn how the keywords Async and
0:24
Await together provide a special
syntax to work with promises, and
0:27
with that feels more intuitive and
concise.
0:30
Async/await and promises are fundamentally
the same under the hood.
0:33
So you should understand how promises
work before working with async/await.
0:36
Now that you are familiar with using
promises, I'll quickly show you how
0:41
async/await works then we'll
begin using it in our project.
0:45
It all happens with two special
keywords async and await.
0:49
The keyword async defines
an asynchronous function.
0:54
You can mark any JavaScript
function with async like so.
0:57
This function, for example,
is going to make a fetch request.
1:00
Inside of an async function, you use
the await keyword to wait for a promise.
1:03
The fetch method, for
instance, returns a promise.
1:09
By placing await in front of fetch,
1:11
the function is awaiting a resolved
promise returned by fetch.
1:14
Once resolved, the fulfilled value,
which is the response object,
1:18
is assigned to the variable response.
1:22
The next step is to parse
the response to json.
1:25
This task is also asynchronous and
returns a promise.
1:28
So in parsing the response, include the
await keyword in front of response.json.
1:31
Once the awaited promise is resolved the
json gets stored in the variable data, so
1:37
data is returned by the function.
1:42
The await keyword pauses the execution
of the async function and
1:44
waits for the resolution of a promise.
1:48
It then resumes execution and
returns the resolved value.
1:50
Pausing the execution, however, is not
going to cause any blocking behavior.
1:54
The JavaScript engine can run and
1:58
execute other tasks in
the meantime via the event loop.
2:00
And keep in mind that the await keyword
is valid only inside functions marked as
2:03
async.
2:08
If you use await outside of an async
function, you will get a syntax error.
2:09
And notice how no then methods
are used to return a promise.
2:13
Instead it looks like a regular function.
2:17
That's where the power
of async await lies.
2:19
It lets you write asynchronous
promise-based code that looks more like
2:21
synchronous code.
2:25
Also, it's important to remember that an
async function always returns a promise.
2:26
That promise resolves with the value
the async function returns or
2:32
rejects with an error thrown
from within the function.
2:36
For example,
2:40
the data returned by the fetchData
function is wrapped in a promise.
2:41
One way to access the data is to chain
a then method onto the function call,
2:45
just like you normally would when
working with promises or a fetchAPI.
2:49
You're going to learn more about combining
async/await with promise chains,
2:53
along with common ways to handle errors
when using async/await and more.
2:57
Now that we've covered some of the basics,
3:01
we'll begin converting many of our
project's promise chains to async/await.
3:03
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up