REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Promise.finally()

AI & DATA SCIENCE // promise-finally

Promise.finally() runs a callback when the Promise settles (resolved OR rejected), without receiving the settled value.

Syntax

fetch('/api/data')
  .then(process)
  .catch(handleError)
  .finally(() => hideSpinner());

Deep Dive Course

**Promise.finally()** is the Promise equivalent of the `finally` block in try/catch. It receives no arguments (can't distinguish resolved from rejected) and runs cleanup code like hiding loading spinners, releasing resources, or resetting state. It returns the original Promise's value or rejection.

1Understanding Promise.finally()

Promise.finally() is the Promise equivalent of the finally block in try/catch. It receives no arguments (can't distinguish resolved from rejected) and runs cleanup code like hiding loading spinners, releasing resources, or resetting state. It returns the original Promise's value or rejection.

💡

finally() is transparent — it passes through the resolved value or rejection without altering it (unless it throws or returns a rejected Promise).

editor.html

async function loadWithSpinner() {
  showSpinner();
  try {
    const data = await fetchData();
    renderData(data);
  } catch (e) {
    showError(e.message);
  } finally {
    hideSpinner(); // always hides
  }
}

// Equivalent with Promise chain
fetchData()
  .then(renderData)
  .catch(e => showError(e.message))
  .finally(hideSpinner);

localhost:3000

2Practical Example

Here is a real-world application of Promise.finally() showing how it is used in production JavaScript code.

editor.html

// finally is transparent to values
Promise.resolve(42)
  .finally(() => console.log('settled!'))
  .then(v => console.log('value:', v));
// settled!
// value: 42

localhost:3000

3Best Practices

Follow these guidelines when working with Promise.finally():

1. Use finally() for UI cleanup (spinners, disabled buttons)

2. Don't return values from finally — they're ignored for non-rejections

3. Use for resource cleanup in Promise chains

⚠️

Tip: finally() is transparent — it passes through the resolved value or rejection without altering it (unless it throws or returns a rejected Promise).

editor.html

async function loadWithSpinner() {
  showSpinner();
  try {
    const data = await fetchData();
    renderData(data);
  } catch (e) {
    showError(e.message);
  } finally {
    hideSpinner(); // always hides
  }
}

// Equivalent with Promise chain
fetchData()
  .then(renderData)
  .catch(e => showError(e.message))
  .finally(hideSpinner);

localhost:3000

Examples

Example 01Basic Usage

async function loadWithSpinner() {
  showSpinner();
  try {
    const data = await fetchData();
    renderData(data);
  } catch (e) {
    showError(e.message);
  } finally {
    hideSpinner(); // always hides
  }
}

// Equivalent with Promise chain
fetchData()
  .then(renderData)
  .catch(e => showError(e.message))
  .finally(hideSpinner);

Example 02Advanced Example

// finally is transparent to values
Promise.resolve(42)
  .finally(() => console.log('settled!'))
  .then(v => console.log('value:', v));
// settled!
// value: 42

Best Practices

Use finally() for UI cleanup (spinners, disabled buttons)
Don't return values from finally — they're ignored for non-rejections
Use for resource cleanup in Promise chains

Interview Question

What is the difference between Promise.finally() and .then(fn, fn)?▼

Hint: Arguments and transparency.

finally() receives NO arguments (can't inspect the value/error) and is transparent (passes through the original value/rejection). .then(fn, fn) receives the value or error and can transform both. Use finally for cleanup that doesn't depend on the result.

Exercises

MediumPractice using Promise.finally() in a real scenario.

View Solution

async function loadWithSpinner() {
  showSpinner();
  try {
    const data = await fetchData();
    renderData(data);
  } catch (e) {
    showError(e.message);
  } finally {
    hideSpinner(); // always hides
  }
}

// Equivalent with Promise chain
fetchData()
  .then(renderData)
  .catch(e => showError(e.message))
  .finally(hideSpinner);

Frequently Asked Questions

What is the difference between Promise.finally() and .then(fn, fn)?▼

Related Functions

Promisesthencatchawaitfinally