The Elegant Solution: Promise.finally() for Cleanup in JavaScript

Streamlining Your Asynchronous Code with a Simple Yet Powerful Technique

Photo by Nathan Queloz on Unsplash

As developers, we often find ourselves dealing with asynchronous operations in JavaScript, whether it’s fetching data from an API, interacting with the file system, or handling user events. While promises have greatly simplified the management of asynchronous code, there are still scenarios where we need to perform cleanup operations regardless of whether the promise is fulfilled or rejected.

This is where Promise.finally() comes into play, offering an elegant solution for executing code after a promise has settled. Before we dive into the details, let's set the stage with a practical example. Imagine you're building a web application that fetches data from an external API.

During the fetching process, you might want to display a loading indicator to the user. Once the data is retrieved (or an error occurs), you'll want to hide the loading indicator. This is a perfect use case for Promise.finally().

function fetchData() {
  showLoadingIndicator();

  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      // Process the fetched data
      console.log(data);
    })
    .catch(error => {
      // Handle any errors
      console.error('Error:', error);
    })
    .finally(() => {
      // This code will run regardless of the promise's outcome
      hideLoadingIndicator();
    });
}

In this example, we first call the showLoadingIndicator() function to display a loading indicator to the user. Then, we use the fetch API to retrieve data from an external API. Regardless of whether the fetch operation succeeds or fails, the code inside the finally block will execute, allowing us to call the hideLoadingIndicator() function and remove the loading indicator from the user interface.

The Promise.finally() method is a relatively new addition to the JavaScript language, introduced in ECMAScript 2018 (ES9). It takes a callback function as an argument, which will be executed once the promise has settled, regardless of whether it was fulfilled or rejected. Here's another example that demonstrates how Promise.finally() can be used for cleanup operations: