await keyword in es2016

Akash Gutha
InstructorAkash Gutha
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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.

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.

egghead
egghead
~ just now

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today