Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    await keyword in es2016

    Akash GuthaAkash Gutha

    In this lesson, we get an introductory look at the await keyword.

    We will start with a problem statement of making three network calls one after the other and provide a solution using promises. We will then upgrade the example to use the new await keyword.

    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

    Instructor: 00:00 The await keyword is introduced in conjunction with the async keyword to make asynchronous programming a breeze. To understand await keyword, we'll first take a problem and try to solve it using await keyword.

    00:11 The problem statement is like this. We have to make three network calls, one after the other in order. By in order, I mean the first network call should be completely done before we make the second network call, and so on.

    00:26 To simulate a network call locally, I'll make a function called the longNetworkCall. It simply returns promise. It will result the promise with the string data after one second.

    00:37 First, let's start without using the await keyword. Let's take the network call and use it here. Since it returns a promise, we can do .then. We can get the result. Now that we have the data, we can just console.log it. We'll just say the result from the first call, and there you go. We have completed our first network call.

    01:02 Now, we have to make the second network call as soon as the first network call is completed. Whenever the first network call is completed, this is the anonymous function that will be run. Here is a great place to place our next call. Let's just copy the whole network and place it here. We can just say that this is the second call. This is probably the best place to place the third call.

    01:26 As you can see, now we have three calls that happen one after the other. Now, let's just see these in action. We'll do node index.js. You can see that we get the data once per second.

    01:39 Now, we'll change the getData function to use the await keyword. We'll get rid of most of these. For the longNetworkCall, we'll do let result is equal to the longNetworkCall. Here, we'll add the await keyword in front of the longNetworkCall. We are awaiting the promise that is being returned by the longNetworkCall.

    02:04 Let's try to run this. There's an error. The error says that await is only valid in an async function. Let's go ahead and change the getData to be async function and run again. You can see, after one second, you'll get data from first call.

    02:27 Let's just clear this and get back to our original problem statement. We have to make three network calls in order. The await keyword is a blocking statement that unless and until this promise is not resolved, it will not execute the statement or any other statement below this line.

    02:42 To make a second network call, all we need to do is copy this entire thing and make the next network call. We'll just remove the declaration of let, and then we'll say that this is the second call. We'll see this in action.

    02:59 You can see that after the first second, we get the first call, and after the second second, we get the second call. Just like the second one, we can also do the third call. If we run this, you can see that we get the result as expected.

    03:17 To recap, we need to mark the function as async to use an await keyword inside the function. The await keyword can be used in conjunction with promises or functions that return promises. Once the await keyword is added, asynchronous calls are turned into synchronous calls.

    03:35 In this case, asynchronous call which takes one second will stop the JavaScript interpreter at this point, and let statement take one second to execute. After the statement is executed, then we log this statement, and then get this statement which again triggers a one-second delay because it is awaited, and then we print out the statement, and so on.

    Discuss

    Discuss