Finally... A Post on Finally in Promises

“When does finally fire in a JavaScript promise?” This is a question I was asked in a recent workshop and I thought I’d write up a little post to clear up any confusion.

The answer is, to quote Snape:

…always.

The basic structure is like this:

try {
  // I’ll try to execute some code for you
}
catch(error) {
  // I’ll handle any errors in that process
} 
finally {
  // I’ll fire either way
}

Take, for instance, this example of a Chuck Norris joke generator, complete with content populated from the Chuck Norris Database API. (Aside: I found this API from Todd Motto’s very awesome list of open APIs, which is great for demos and side projects.)

See the Pen
finally! chuck norris jokes! by Sarah Drasner (@sdras)
on CodePen.

async function getData() {
  try {
    let chuckJokes = await fetch(`https://api.chucknorris.io/jokes/random`)
      .then(res => res.json())
    
    console.log('I got some data for you!')
    document.getElementById("quote").innerHTML = chuckJokes.value;
  } 
  catch(error) {
    console.warn(`We have an error here: ${error}`)
  }
  finally {
    console.log('Finally will fire no matter what!')
  }
}

In the console:

Console that says: I got some data for you! and Finally will fire no matter what!

Now, let’s introduce a typo to the API and accidentally put a bunch of r‘s in the URL of the API. This will result in our try statement failing, which means the catch now throws an error.

async function getData() {
  try {
    // let's mess this up a bit
    let chuckJokes = await fetch(`https://api.chucknorrrrris.io/jokes/random`)
      .then(res => res.json())
    
    console.log('I got some data for you!')
    document.getElementById("quote").innerHTML = chuckJokes.value;
  } 
  catch(error) {
    console.warn(`We have an error here: ${error}`)
  }
  finally {
    console.log('Finally will fire no matter what!')
  }
}

Console:

One giant important piece that the example doesn’t illustrate is that the finally block will run even if in the try or catch block, a return or break statement stops the code.

When would you use this?

I’ve found it particularly useful in two different situations, though I’m sure there are others:

When I otherwise would duplicate code that’s need in the try and catch blocks. Here’s an example in a Vue cookbook recipe I wrote. I shut off the loading state in a finally block. This includes, like the example above, where I need to change the UI somehow in either case.
When there’s some cleanup to do. Oracle mentions this in their documentation. It’s Java, but the same premises apply.

Finally is not useful as often as try and catch, but worth noting for some use cases. Hope that clears it up!

Comments

Dan Jones

# July 16, 2019

The title is a little confusing. This article isn’t really about finally in Promises. That’s detailed here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

This is about finally in try/catch. The fact that you have a promise in your code is irrelevant to the fact that you’re using finally.

I could just as easily do:

try {
    throw "I'm sad";
} catch (error) {
    console.error(error);
} finally {
    console.log('Finally!');
}

No promises at all.

If you wanted to talk about finally in promises, you would get rid of your async/await stuff, and do something like:

fetch(`https://api.chucknorrrrris.io/jokes/random`)
  .then(res => res.json())
  .then(chuckJokes => document.getElementById("quote").innerHTML = chuckJokes.value)
  .catch(err => console.warn(`We have an error here: ${error}`))
  .finally({} => console.log('Finally will fire no matter what!'));

Alex Bussey

# July 19, 2019

async/await is just another syntax for using promises.

Adrian Oprea

# July 19, 2019

You are right Dan, but the dynamics are the same.

The title could indeed be misleading for people who don’t yet know about or use async/await. Otherwise the same principles apply, as long as the code is synchronous

Good write-up Sarah. I found that it’s far easier to explain Promises when the code looks synchronous, because people can read it top-down and understand the concept rather fast.

Sarah Drasner

# July 19, 2019

Hey Dan! Thanks for the comment. The async await operators are using promises:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

My fault for not explaining this, and making the post more confusing than it should be.
Thanks for mentioning! I’ll be more careful about that in the future.

Haim Michael

# July 19, 2019

This is the same thought I had in mind. I agree with this comment. However, maybe we all miss something here… Sarah, can you please elaborate on this..?

Eugene

# July 20, 2019

The async await operator is using promises indeed.
But there is no need to wrap the code in your example in try/catch/finally block. If you illustrate finally in the context of promises, I think this code is a better example:

async function getData() {
  await fetch(`https://api.chucknorris.io/jokes/random`)
    .then(res => res.json())
    .then(res => {
    console.log('I got some data for you!');
    document.getElementById("quote").innerHTML = res.value;
  })
    .catch(error => {
    console.warn(`We have an error here: ${error}`)
  })
    .finally(() => {
    console.log('Finally will fire no matter what!')
  })
}

Muhammad Ammar Hassan

# July 25, 2019

Great article! I might be lacking morning coffee but I think there is a confusion here, when u said

finally {
    console.log('Finally will fire no matter what!')
  }

but in console it says

“I will fire no matter what”

I am starter and tend to get stuck on small details. maybe I am wrong or missing something

This comment thread is closed. If you have important information to share, please contact us.