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.