Lessons: 65Length: 7.1 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

10.5 More About async and await

We'll wrap up this final section of the course with a look at using multiple awaits in a single async function, and catching errors with try...catch.

Key terms:

  • try...catch

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.5 More About async and await

Hi folks, in this lesson, we're going to take a look at Async and Await in a little more detail. Focusing on using Awaits multiple times inside and Async function. Earlier in this chapter, we saw promise chaining in action. While this is an improvement over nested callback functions and the pyramid of doom Awaits can improve our code even further. Let's say that we want to do the same as before. Use the number returned by the numbers API is the basis for a request to the Game of Thrones character API. We use the Await operator on the first call to get API response as we did in the last lesson. When the promise resolves, we can then get the number from the start at the fact and then invoke the get API response function again for the second request. And we can Await this one too. At the end, we can return the second promise object. As you can see, this is much more concise and readable than having multiple then methods chained together. The code is insynchronous but it reads and behaves as if it were synchronous, which simplifies the code enormously. Let's compare this to the original then based code that we used earlier. At the moment, this code is quite expanded, and we could save some space by refactoring it slightly and tidying it up. So this is a bit tidier, and it takes up a few less lines, but still, with Async and Await, we have just a single function. With the original code, we have effectively four callback functions. And let's just go back to the browser and check that everything is working as we expect it to. And we can see the returned Game of Thrones character data logged to the console as we expect. One thing we haven't looked at yet is error handling. With Async and Await it's recommended to use try catch around the Await statements. We can wrap the whole contents of the function in the tripart. In the catch part, we should make sure to throw any error that is caught, otherwise the arrow will not be passed back to the caller properly. We can then add a catch method to where the make request function is called. So now, if we mess up one of the URLs, we should see that an error is thrown. Let's go back to the browser console, and we can see that the error has indeed been thrown. We don't get much information because the get API response function only rejects the promise with the status tags at the error. So in this lesson we looked at how to use the Await operator multiple times inside in Async function. Which is really a convenience to avoid long promise change. We also saw how to make sure that any areas in an Async function are handled correctly using a regular try catch statement. The next section is a brief recap the main themes of the course and some closing words from myself. Thanks for watching.

Back to the top