Handling Rejected Promise (errors) by Catch and Finally method in JavaScript
Introduction
When developing web applications, it's crucial to handle errors effectively. In this article, we'll explore how to handle errors in JavaScript promises, which are commonly used for asynchronous operations. We'll discuss the concept of promise rejection, understand how it occurs, and learn how to handle it using practical examples.
Understanding Promise States and Results
Promises represent the eventual completion or failure of an asynchronous operation. Initially, a promise is in a pending state, and it transitions to a settled state when either resolved (successful) or rejected (error occurred). Resolved promises return the requested data, while rejected promises contain error information.
Handling Errors in Promises
To handle errors in promises, we'll work with an example code snippet. The code involves making multiple AJAX requests using the Fetch API to retrieve information about different countries. So far, we have only focused on handling resolved promises using the then
method but haven't addressed rejected promises.
Simulating Error Conditions: To simulate error conditions, such as losing internet connection, we can use the developer tools. By going offline and making a request, we can trigger a rejected promise with an error message stating "Failed to fetch."
Adding Error Handling Logic
To handle rejected promises, we need to modify our code. Instead of relying on multiple callback functions for each then
method, we can use the catch
method, which specifically handles rejected promises. The catch
method takes a callback function that receives the error object passed by the rejected promise. In our case, we'll use an alert to notify the user of the error.
Simplifying Error Handling with catch
By using a single catch
method at the end of the promise chain, we can handle all the rejected promises. The catch
method ensures that the error is caught and processed, avoiding uncaught errors in our application. With this approach, we don't need to specify a separate callback function for each then
method to handle rejections.
Displaying Error Messages: In real-world scenarios, it's essential to inform users about errors. We can enhance our error handling logic by displaying error messages on the web page. For example, we can insert the error message into a specific container element using the insertAdjacentText
method. By doing so, users will be aware of any errors preventing the display of requested data.
Finally Method
The finally
method in JavaScript promises is used to specify a callback function that will be executed regardless of whether the promise is resolved or rejected. It allows you to define cleanup logic or perform actions that need to be executed in both success and failure scenarios.
The finally
method is placed at the end of the promise chain, after all the then
or catch
methods. It does not receive any arguments, as it is not concerned with the outcome of the promise. Instead, it simply executes its callback function once the promise is settled, either resolved or rejected.
Conclusion
Handling errors is a critical aspect of web development. In this article, we learned how to handle errors in JavaScript promises. We explored the concept of promise rejection and discovered how to handle rejected promises using the catch
method. By incorporating an error message display, we can provide a better user experience and effectively communicate errors occurring during asynchronous operations.
Thanks to Proacdemy :)