Handling Errors5:32 with Guil Hernandez
What would happen if a fetch gets rejected or returns in a failed state? To handle these types of errors, you use the
catch() method, which deals with rejected cases only.
Our app is now receiving and 0:00 displaying all the content it needs using fetch and promises. 0:02 But what would happen if a fetch gets rejected or returned in a failed state? 0:06 For example, if a user is offline, the API server is down, 0:11 or the API just doesn't have an image for the selected value? 0:15 To handle these types of errors, you use the catch method, 0:19 which deals with rejected cases only. 0:23 Back in our project, 0:26 let's chain a catch method to the end of one of the fetch data sequences. 0:27 I'll chain it to the first one with .catch. 0:32 And now if there's ever an error fetching this data, 0:36 catch will get called to handle any errors thrown by the code. 0:40 Let's pass catch an arrow function that takes an error 0:44 object via the parameter error and returns a console.log 0:50 with the error message, Looks like there was a problem. 0:55 After the string, I'll add a comma and 1:04 log the rejection reason by passing it the error object. 1:07 So now if a promise is rejected, catch will get called and 1:12 display this error in the console. 1:17 So for example, if my internet connection cuts off or if I mistype the URL to fetch, 1:20 I'll see the error message I wrote in the catch method, 1:27 Looks like there was a problem along with the TypeError: Failed to fetch. 1:31 Now I want a catch method in all of my fetch requests. 1:38 Well, instead of chaining a catch method to each request, 1:42 I'll move this catch method over to my fetchData function. 1:46 So I'll chain it to its then method. 1:51 I'll go ahead and fix the URL back to api/breeds/list. 1:56 And now the console error is gone. 2:04 Remember, once the fetch promise is fulfilled it returns a response 2:12 object containing information about the response. 2:17 So I'll quickly log all the responses here in the fetchData function. 2:20 And for example, It lets you know if the response is okay and 2:27 the status code of the response. 2:33 So the 200 status code is the most common code returned. 2:36 It means that the request has succeeded. 2:39 Again, I recommend watching our content on HTTP request and responses to learn more. 2:42 Since fetch is only concerned with sending a request and 2:48 receiving a response from the server, 2:51 we should also provide a way of checking for and handling failed HTTP responses. 2:54 The easiest way to do this is to check if the response is OK. 3:00 So if the response object does not come back with ok equal to true, 3:06 we'll have the program throw an error to let us know what happened. 3:10 Back in app.js, let's create a new function named checkStatus that will check 3:15 if the promise resolved with the response object's ok property set to true. 3:20 We'll pass it the response via the parameter response. 3:28 And inside the function we'll say, if response.ok 3:33 is true, the Promise gets resolved with the response. 3:40 So in the if block, I'll return Promise.resolve() 3:47 which returns a promise object that is resolved with 3:52 the given value, in this case, the response object. 3:57 Then we'll say else. 4:05 If the response is unsuccessful, 4:07 we're going to reject the Promise which will activate the catch call. 4:10 So in the else block, I'll return 4:16 Promise.reject() to return a rejected Promise. 4:19 And we need to pass it the reason it's rejected, so I'll pass it an error 4:24 object with new Error(), which will throw when an error occurs. 4:29 And as the error description, I'll pass it the response 4:34 status text with response.statusText(). 4:40 So now if a Promise is rejected because of a failed HTTP response, the error showing 4:46 the response.statusText will be passed to the catch method imprinted to the console. 4:51 Finally, up in the fetchData function, 4:57 I'll pass the first then method chained to fetch the checkStatus function. 5:00 So now we have a pretty solid and dependable sequence here. 5:07 From now on, if a fetch Promise is fulfilled, first, 5:11 it's going to check the status of the response. 5:14 If that Promise is resolved, then it parses the response to JSON, and so on. 5:18 All right, good. 5:24 So in the next video, you'll learn an additional way of composing Promises with 5:25 the Promise.all method. 5:29
You need to sign up for Treehouse in order to download course files.Sign up