Promise.allSettled

By  on  

The Promise object has many useful functions like all, resolve, reject, and race -- stuff we use all the time. One function that many don't know about is Promise.allSettled, a function that fires when all promises in an array are settled, regardless of whether any of the promises are resolved or rejected.

Promise.all is great but then isn't called if a project is rejected:

Promise.all([
  Promise.resolve(1),
  Promise.resolve(true),
  Promise.reject("Boooooo"),
])
.then(_ => console.log("Then!"))
.catch(e => console.log("catch!"));

// Catch!

There are always going to be cases where you'd like to run the then function regardless of individual results -- think hiding a spinner image at the end of multiple fetch requests; that's where Promise.allSettled comes in:

Promise.allSettled([
  Promise.resolve(1),
  Promise.resolve(true),
  Promise.reject("Boooooo"),
])
.then(promiseResults => console.log("Then! ", promiseResults))
.catch(e => console.log("catch!"));

/*
Then!
[
  { status: "fulfilled", value: 1 },
  { status: "fulfilled", value: true },
  { status: "rejected", reason: "Boooooo" }
]
*/

Promise.allSettled is awesome -- certainly much better than an old shim floating around years ago. Between all, allSettled, and race, as well as the ability to cancel fetch requests, we've almost got every aspect of Promises covered!

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Scroll IFRAMEs on iOS

    For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari.  For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's...

  • By
    Flexbox Equal Height Columns

    Flexbox was supposed to be the pot of gold at the long, long rainbow of insufficient CSS layout techniques.  And the only disappointment I've experienced with flexbox is that browser vendors took so long to implement it.  I can't also claim to have pushed flexbox's limits, but...

Discussion

  1. I think the rejected results in the last code block should be:

     status: 'rejected', reason: 'Boooooo' }
  2. My only problem with this approach is that the .catch block never gets called with Promise.allSettled()

    • Werner

      Yes, that is import! Thank you Michel! Please correct that David.

  3. Terry

    So with allSettled is the .catch handler deprecated? When is it hit? Same with the onRejected param to then?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!