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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

10.2 Promise Chaining

In this lesson we continue looking at promises, this time focusing on handling multiple asynchronous tasks with promise chaining.

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.2 Promise Chaining

Hi, folks. In this lesson, we're going to look at promise chaining, which is a useful way of handling a sequence of asynchronous actions while keeping our code nicely readable. In the last lesson, we finished up by creating a function that makes an Ajax request to the numbers API. Let's extend that example so that we make another request using the number returned by the numbers API. Starting with the code as we left it in the last lesson, the success handler logs the response from the numbers API to the console. Instead, let's take up to the first three numbers from the returned number fact, which always starts with a number, and pass this number to a different API. First of all, let's just update the name of the getNumberFact function so that it's a bit more generic. Let's change the name of the function to getApiResponse. Great. Now before we actually look at promise chaining, let's just look at the alternative. It might be intuitive to make a new request actually inside the success handler of the first then. Like this. This time, we can get the number at the start of the number fact returned from the numbers API using the match string method on the response. This returns an array, and the number will be the first item in that array. We can then trim that down to up to the first three digits of the number, just in case the numbers API returns a ridiculously big number, which it occasionally does. We then invoke the get API response method once more, this time passing a different URL, which in this case is a Game of Thrones character API. So this should work, and we should see the response from the second API in the browser's console. Let's just take a look. And we can see the character data there returned from the Game of Thrones character API. The problem with this code, unfortunately, is that the response handler for the second request is indented. The code is moving towards the right of this screen, in the classic pyramid of doom. If we wanted to make even more additional requests, our code could end up starting halfway across the page, making it much less readable. Promise chaining can fix this for us. Instead of handling the response in the first success handler, we can just return the value that we want to make use of in the chained promise. Let's change the first success handler like this. This is a condensed version of the previous code, but know that instead of making the second request inside the success handler, we are just returning the number, which will still be up to the first three digits of the numbers API number. The then method itself returns a promise. So we can chain another then method after the first one, which will receive the success value from the first promise. The success handler for this then method will receive the number returned by the previous method, so we can use this to make the second request. As this is an arrow function, it will return the return value of the get API request function, which will be another promise. To handle the response from the second request, we can chain another then method after the second one. In the success handler for this then method, we should receive the Game of Thrones character data, which we can just log to the console. This should work in exactly the same way as the previous example, but notice that our code isn't moving to the right at all, it's all staying neat and readable. This is the benefit of promise chaining. Let's just check that everything is still working in the browser. And we can see the Game of Thrones character data there in the console, as expected. We can also tidy this code up further. Notice how we're duplicating the error handler in each method of the chain? Well, instead of doing that, we can just chain a catch method onto the end of the chain. This will now catch any error in any of the previous chained then methods, so we can remove the separate error handlers from the previous methods, making our code even shorter. With nested then methods, this kind of error handling is not possible. So in this lesson, we looked at promise chaining, and saw that the then method itself returns a promise, allowing us to chain the then method multiple times in order to handle multiple requests without resorting to unsightly excessive nesting. We also learned that this gives us improved error handling, allow us to catch an error in the chain using a single error handler with the catch method. In the next lesson, we will look at async functions. Thanks for watching.

Back to the top