Javascript promise.finally() method

The javascript promise is accepted or refused, and the finally() procedure is always used. Either the promise is fulfilled or rejected, the finally() method is called.

Once an asynchronous function has been completed, a Promise is a JavaScript object that produces a value. Errors are produced when it cannot complete an operation because of a timeout.

ES2018 brought about the finally() function. If you want to clean up the resource after the promise is fulfilled, regardless of how it turns out, you can put the code in the finally() method.

It may be utilized to carry out cleanup duties after the promise has been resolved because it is always carried out, whether fulfilled or denied. The Promise's promise's then() and catch() functions are not duplicated.

Syntax

The following syntaxes use javascript function to operate the promise finally() methodtion.

promise
    .then(result => { //write code. })
    .catch(error => { //write code. })
    .finally(() => { //write code. })

task.finally(function() {
  // the promise settles and displays as an output 
});

Explanation:

As previously indicated and further explained below, this method has only one parameter.
After the Promise is fulfilled, the onFinally function will be called.
Return Value: It gives back a Promise with the provided function as its finally handler.

Examples

The following javascript promise finally() method's examples show the operation and functionality.

Example 1:

The example shows the basic promise function with the finally method. Here we use a simple promise with a resolved value. The finally method's information is displayed with the resolved data. We can use the "then", "catch," and "finally" methods together to display resolved, error, and final output.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.finally() method </title>
</head>
<body>
<h3> JavaScript's Promise.finally() method  </h3>
<p> output shows in console tab </p>
<script>
const Promise1 = Promise.resolve(80);
console.log("JavaScript's Promise.finally() method");
Promise1
  .then((values) => console.log(values))
  .catch((err) => console.log(err))
  .finally(() => console.log("Operations of the  Promise.finally have completed."));
</script>
</body>
</html>

Output

The image shows promise resolve data with the finally method data.

Example 2:

The example shows the JavaScript promise function with the promise variable and finally() method. Here we use promise with resolve and reject the operation and display finally() method's data. The finally method does not affect the resolved and rejected information.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.finally() method </title>
</head>
<body>
<h3> JavaScript's Promise.finally() method  </h3>
<p> Here, We use only the finally method with a promise to display the required output. </p>
<p> output shows in console tab </p>
<script>
const Promise2 = new Promise((resolve, reject) =>
setTimeout(reject, 200, 'java'));
console.log("JavaScript's Promise.finally() method");
Promise2
  .finally(() => console.log("function of the  Promise.finally() have completed."));
</script>
</body>
</html>

Output

The image shows promise resolve data with the finally method data.

Example 3:

The example shows the JavaScript promise function with the finally method. Here we use promise with resolve and reject the operation with value. The method's information is displayed with the output data.

Here we set the time with the resolve and reject condition in the promise function.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.finally() method </title>
</head>
<body>
<h3> JavaScript's Promise.finally() method  </h3>
<p> output shows in console tab </p>
<script>
const Promise2 = new Promise((resolve, reject) =>
setTimeout(reject, 200, 'java'));
console.log("JavaScript's Promise.finally() method");
Promise2
  .then((values) => console.log(values))
  .catch((err) => console.log(err))
  .finally(() => console.log("Operations of the  Promise.finally have completed."));
</script>
</body>
</html>

Output

The image shows the promise of the resolve and rejects data with the finally method data.

Example 4:

The example shows the JavaScript promise function with the reject and finally method. Here we use a promise to reject the operation with value. The method's information is displayed with the output data

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.finally() method </title>
</head>
<body>
<h3> JavaScript's Promise.finally() method  </h3>
<p> output shows in console tab </p>
<script>
let Promise2 = Promise.reject("Rejected Data");
console.log("JavaScript's Promise.finally() method");
Promise2
  .then((values) => console.log(values))
  .finally(() => console.log("Operations of the  Promise.finally() have completed."));
</script>
</body>
</html>

Output

The image shows the promise of the resolve and rejects data with the finally method data.

Example5

The example shows the JavaScript promise function with the reject, then, and finally methods. The method's information is displayed with the output data of the finally method. If the "then()" method works or not, then also finally method works operation.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.finally() method </title>
</head>
<body>
<h3> JavaScript's Promise.finally() method  </h3>
<p> output shows in console tab </p>
<script>
let Promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject("Promise is rejected!");
}, 5000);
});
Promise2
.then(
(data) => {
console.log(data);
},
(error) => {
console.log("Error:", error);
}
)
.finally(() => {
console.log(
"This is finally() block shows final output as an information."
);
});
</script>
</body>
</html>

Output

The image shows promise resolve data with the "then" and "finally" method data.

Example 6:

The promise.finally() method uses in the promise.any() category to fulfill operation and display output. We can use all the methods with the iterable value. The finally() method calls the input information and shows it as an output.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.any() method </title>
<script>
console.log("JavaScript's Promise.any() method");
const pr1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' first Promise is rejected');
reject('error');
}, 1000);
});
const pr2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' second Promise is fulfilled');
reject('error1');
}, 2000);
});
Promise.any([pr1, pr2])
.then((values) => console.log(values))
.catch((err) => console.log(err))
.finally(() => console.log("Operations of the  Promise.any() have completed."));
</script>
</head>
<body>
<h3> JavaScript's Promise.any() method  </h3>
</body>
</html>

Output

The console tab displays output with the aggregate information.

Conclusion

The JavaScript finally() method works, even if promise data is displayed or not displayed as an output. It displays default data using the Javascript promises.

Next TopicJavaScript Promise.any() Method

← prev next →