Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Write an Asynchronous Function with async/await

    Marius SchulzMarius Schulz

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss