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 JavaScript Data Fetching!
You have completed JavaScript Data Fetching!
Preview
See how async/await simplifies promise-based code. Rewrite fetch requests in a clean, top-to-bottom style.
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
In the
last video, we made our first real HTTP
0:00
request using the fetch API.
0:03
Our current code
isn't anything outrageous, but
0:05
imagine if there were many more steps
needed to be performed on our response.
0:08
We could eventually be chaining
a lot of then methods.
0:12
And while that works, JavaScript
gives us a much cleaner and more readable
0:15
way to write asynchronous code,
async and await.
0:19
Think of async await as a friendlier layer
on top of promises.
0:23
It does the same thing, but in a way
that looks like regular step by step code.
0:27
If promises are like saying,
when this finishes, then do this,
0:33
async await is like saying, pause
until this finishes, then continue.
0:36
You're still working with promises.
0:41
You're just writing them in a way
that reads like synchronous code.
0:43
Let's check it out.
0:47
Okay. Let's refactor our current code
to utilize async and await.
0:49
First, let's wrap
our fetch call inside of its own function.
0:54
I'm gonna call it fetch breed list.
0:58
Now to use await,
we need to mark our function as async.
1:08
So just before our function keyword,
let's add the async keyword.
1:12
Now that our function is marked as async,
we can use await.
1:17
When we use await, we're telling
this function to pause at that line
1:22
until the promise is resolved
without blocking the rest of the program.
1:26
While this function is waiting,
1:30
JavaScript
can continue running other code elsewhere.
1:32
So await makes asynchronous code
look synchronous, but behind the
1:35
scenes, it's still nonblocking.
1:39
Let's store our fetch promise
in a variable. Let's call it response.
1:41
To tell the function to pause here,
we add the await keyword
1:47
directly after the equals sign.
1:50
Now that we're using async and await,
we can remove our then
1:54
and catch methods and write
this more like traditional JavaScript.
1:57
So let's create another variable
and name it data.
2:02
We'll assign this our call
to response dot JSON.
2:05
And as this returns a promise
2:10
as well, we'll mark
this one with await too.
2:13
Okay.
2:16
Now that we have our parsed response,
let's call our helper function again,
2:16
passing in data dot message.
2:21
Awesome.
2:28
Lastly, now that our fetch call is placed
within a function,
2:30
we need to call this function.
2:33
I'm gonna go under this initialization
comment and call it right here.
2:35
Okay.
2:39
Let's save this and refresh our preview
to make sure everything is working still.
2:40
Alrighty.
2:47
We're back.
2:48
Everything is working as it should,
and our code looks a bit
2:48
more readable and familiar.
2:53
But we've lost something, haven't we?
2:54
We're not handling errors anymore.
2:56
We'll try our best
to catch them in the next video.
2:58
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