10.4 The await Keyword

Hi folks. In this lesson we're going to take a look at the ES8 Await operator. The first thing we should know about the await operator is that it can only be used inside async functions. If we try to use it outside of an async function, it will generate a syntax error. The await operator really has only one purpose, and this is to pause the execution of a function, while it waits for an asynchronous action to complete once the action is complete. Execution of the function will then resume and continue until either the function returns or another await operator is encountered. This is really interesting behavior, and if it sounds familiar it's because it's very similar to how generator functions and the yield keyword work. Using the await operator is just like combining promises with generator functions. And that's actually the reason why the await operator was created to simplify combining generator functions with promises. Let's look at an example. In the last lesson, we added an async function called make request. This is the perfect place to use await, so let's update it. Let's have it call the API response and pass it the URL it receives as an argument. We can just add a console locate Mark when we add the await keyword, which will do shortly. So let's see how it behaves before we add the await keyword. We should also make sure we're passing a valid URL when we call this function. And to really appreciate how awaits works, let's just add another console log after we call the async function. Great, now let's check the browser console. We should see the after await log statement first, then the after request log message. And last, we should see the number fact. This is probably as you expected it to be, right? As the program is executed, it calls the maker request function and goes into the maker request function. It then creates the get API response promise logs the first message then returns. At that point it moves on to the second console log. So let's add the await keyword and see what happens. And let's go back to the console. So the await operator changes everything about how the code executes. This time we see that the after request message comes first, then the after await message. Let's walk through how the code executes. This time when the make request function is called, execution moves into the make request function. But as it creates the get API request promise, it encounters the await operator. So after invoking the get API response function, it immediately pauses and execution moves back to the main context. It then logs the first console message which is after request. Then when the get API response promise resolves, execution transfers back into the makeRequest function where it was paused and resumes, logging the second message to the console. You can see that the await keyword has a profound effect on how our code executes. So in this lesson we looked at the await operator, and learned that this is a special operator that we can only use inside async functions. We saw that the await operator causes an async function to pause while it waits for the results of an asynchronous task. In the next lesson, we will look at some additional async and await techniques. Thanks for watching