Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Asynchronous Programming with JavaScript!
You have completed Asynchronous Programming with JavaScript!
Preview
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