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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

10.3 The async Keyword

In this lesson we'll learn about the async keyword, including where we can use it and what happens when we do.

Key terms:

  • async

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.3 The async Keyword

Hi folks. In this section, we're going to take a look at the ES8 Aysnc function. Before we start looking at code, I'm just gonna make some space in the editor here. I'm going to collapse this function. And I'm just going to comment out the promise chain from the last lesson. An Aysnc function is similar in many ways to a regular function with just a few subtle differences. To create an Async function, we just depend the async keyword to the start of the function like this It's just like a regular function declaration in that it has an identifier, can accept arguments and can return a value. In this case, it just returns the value that we passed to it. But one of the things that differentiate async functions from regular functions is that they always return a promise. In this case, we aren't specifically returning a promise. And we aren't really doing anything asynchronous inside the function, but it will still return a promise. Which will resolve immediately with the value we explicitly returned from the function. So, let's take a look in the browser now. And we should see in the console that the value we pass to the function is indeed written to the console. If the function does actually do something asynchronous, the promise it returns will be resolved when the promise settles in the normal way for a promise. Or it will reject if an error occurs. So that's one important fact of Async functions. They always return a promise. The other main feature of async functions is that they enable the use of the await operator. We'll look at this in more detail in the next lesson. The only thing to note at this point is that while the await operator does change how async functions work, it's not essential to use. Async functions that don't make use of await are perfectly fine as we've seen here. In terms of support, all current mainstream browsers support it, except for Internet Explorer. There are polyfills that can help if you need to support IE 11, but the one you should use is largely dependent on which frameworks or build tools that you're using. In the last lesson, we saw how to make use of promise chaining. This is a useful feature to know, which addresses an issue with callbacks, where the indentation slowly builds up inside large functions. However, this can still not be optimal in some situations. This is the reason why async functions were created to simplify the structure of multiple asynchronous actions. So in this lesson we looked at Async functions, which we learned are similar to regular functions, except for two main differences. The first difference is that Async functions always return a promise. Even if an async function doesn't explicitly return a promise, it will wrap the return value in a promise and resolve it immediately. The second feature is that it enables the use of the await operator, which we'll learn more about in the next lesson. Thanks for watching.

Back to the top