Write an Asynchronous Function with async/await
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.
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.
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.
Current Node versions (7.6 and above) do support asynchronous functions already! Check the Kangax compatibility table for detailed information.
Great tutorial! One question, which version of Node.js did you use and I believe this feature is yet to land in LTS version.
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.
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
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).
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,..)
Great course, thanks! Which editor/editor-plugins are you using for this split view?
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!
Thatz cool tip. Thanks
What editor plugin are you using for the function hover tooltip showing a function returns a promise? 🤔
I use Visual Studio Code, which ships with this sort of tooling by default — no additional plugins required.
How do I run this locally?
Getting json from the response is asynchronous? Seems odd.
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