Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

10.4 The await Keyword

In this lesson we'll move on to look at the async keyword's companion, the await keyword, which can only be used within async functions.

Key terms:

  • await

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


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

Back to the top
View on GitHub