Write an Asynchronous Function with async/await

Marius Schulz
InstructorMarius Schulz

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

This lesson introduces the ES2017 async and await keywords. It shows how to write a short asynchronous function that makes an HTTP request and parses the response.

[00:00] Here, we have a short function that talks to the GitHub API. It loads a specific user. Once the response comes back, it parses the body as JSON.

[00:09] Finally, the user's name and location are logged to the console. Let's run this program to make sure it works. Yes, everything seems to work just fine.

[00:23] Let's now see how we can convert the function into an asynchronous function using the async and await keywords. First, we're going to make the function asynchronous by adding the async keyword. Next, we're going to use the await operator to wait until the fetch call completes.

[00:40] The await operator takes a promise and then pauses the function execution until that promise is settled. It then does one of two things. If the promise is rejected, the await expression throws the rejected value.

[00:54] If the promise is resolved, the await expression will return the resolved value. We can then take it and assign it to a variable like this.

[01:04] The next thing we want to do is take the body of the response and parse it as JSON. We'll say, "Const user equals await response at JSON."

[01:14] The JSON method returns a promise as well. This means we can use the await operator again to wait until that promise is settled. Now that we have the user, let's go ahead and log their name to the console.

[01:27] Let's also log their location just like we did before.

[01:32] Finally, let's run the program one more time to make sure we haven't broken anything. As we can see, everything still works. Let's take a look at our asynchronous function one more time. The body of the function almost reads like sequential synchronous code.

[01:47] We can read one statement at a time from top to bottom. We no longer have any indentation or then methods in a promise chain. Oftentimes, this makes it a lot easier to understand the control flow within an asynchronous function.

Dwayne
Dwayne
~ 4 years ago

before i study how to write async and await, can you point to a video maybe of the various problems that this would solve... thx

Marius Schulz
Marius Schulzinstructor
~ 4 years ago

The await operator can make asynchronous code flows easier to understand. This is especially true for nested or conditional async operations. It works with ES2015 promises (in fact, with any thenable) out of the box, so it's not too difficult to integrate it into existing codebases.

Prodigious
Prodigious
~ 4 years ago

How are you able to execute functions with await and async when these are not supported yet by Node, I checkout the git repo and run it but did't get this running, what did I miss ? BTW great course. Thanks.

Marius Schulz
Marius Schulzinstructor
~ 4 years ago

Current Node versions (7.6 and above) do support asynchronous functions already! Check the Kangax compatibility table for detailed information.

Sunit Jindal
Sunit Jindal
~ 4 years ago

Great tutorial! One question, which version of Node.js did you use and I believe this feature is yet to land in LTS version.

Marius Schulz
Marius Schulzinstructor
~ 4 years ago

As of today, the most up-to-date LTS version is v6.10.3, which doesn't support async/await. The upcoming v8.0.0 version will add support once it ships.

Chris Frewin
Chris Frewin
~ 4 years ago

Hi Marius,

I can't even run async.js, node is throwing SyntaxError: Unexpected identifier for fetch. I've installed node-fetch locally and globally:

npm install node-fetch --save

npm install --global node-fetch

respectively, but it's still throwing the error.

What am I missing? Do I need to do something with Babel, or does node handle that automatically? My node version is 7.2.1 and npm 3.10.10

Cheers,

Chris

Marius Schulz
Marius Schulzinstructor
~ 4 years ago

Node v7.2.1 doesn't support async and await yet, you'll have to upgrade to at least v7.6, or better yet, v7.10.0 (the newest version as of today).

Erkan Buelbuel
Erkan Buelbuel
~ 4 years ago

first of all: pretty cool lesson, well done,.. missing parts: stop/interrupt the async-calls on user interaction (e.g. click a stop button, or on route-change etc,..)

Jonas
Jonas
~ 4 years ago

Great course, thanks! Which editor/editor-plugins are you using for this split view?

Marius Schulz
Marius Schulzinstructor
~ 4 years ago

I'm using the native macOS capabilities: Do a long press on the green maximize button and drag the window to either side, then select another one — that's it!

ARJUNKUMAR
ARJUNKUMAR
~ 4 years ago

Thatz cool tip. Thanks

Tobiah Rex
Tobiah Rex
~ 4 years ago

What editor plugin are you using for the function hover tooltip showing a function returns a promise? 🤔

Marius Schulz
Marius Schulzinstructor
~ 4 years ago

I use Visual Studio Code, which ships with this sort of tooling by default — no additional plugins required.

Ivana
Ivana
~ 4 years ago

How do I run this locally?

Brendan Whiting
Brendan Whiting
~ 4 years ago

Getting json from the response is asynchronous? Seems odd.