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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    Google Extension Effect with CSS or jQuery or MooTools JavaScript

    Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...

  • By
    The Simple Intro to SVG Animation

    This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...

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!