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 :)