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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Using Dotter for Form Submissions

    One of the plugins I'm most proud of is Dotter. Dotter allows you to create the typical "Loading..." text without using animated images. I'm often asked what a sample usage of Dotter would be; form submission create the perfect situation. The following...

  • By
    Create WordPress Page Templates with Custom Queries

    One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the top of the list. What...

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!