How to have single finally handler for multiple promises in AngularJS?

Question

I have two promises, independent of each other and I want to do a finally step after both of the promises are completed (either rejects or resolves).

$q.all() cannot be used as I want the finally to always execute (only once for both promises) even if any of the promises rejects

One solution could be to have a counter and have a finallyHandler function to execute it when both promises resolves/rejects.

  var count = 0;
  function finallyHandler() {
    if ( ++count === 2 ) {
      doStuff();
      count = 0;
      }
  }

firstPromise.finally(finallyHandler);
secondPromise.finally(finallyHandler);

This can work but doesn't look right.

Is there any better way to do this?

what about a third promise that resolves when both either resolved or rejected? It would make the code easier to read and mantain. — briosheje, Jan 03 '17 at 19:12
@briosheje has the right idea. Build the array of promises so that each has it's own, pass-thru error behavior. `promises.push( doStuff().catch(e => e) )`, then apply Promise.all to `promises` — danh, Jan 03 '17 at 20:01

Andonaeus · Answer 1 · 2017-01-03T19:59:52.840

Promise.all(iterable) will do what you're looking for. Please have a look at the browser compatibility, however, as Internet Exploer does NOT support this method. From the documentation:

The Promise.all(iterable) method returns a promise that resolves when all of the promises in the iterable argument have resolved, or rejects with the reason of the first passed promise that rejects.

Using your code example (with failure behavior), it would look like this:

Promise.all([firstPromise, secondPromise]).then(values => { 
    finallyHandler();
}, reason => {
    finallyHandler();
});

Even though the failure block is the same as the success block, the success block only runs once all promises have completed successfully, and the failure block runs once (and only once) the first failure is encountered.

Reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

raj · Answer 2 · 2017-01-03T19:53:13.810

0

firstPromise().catch().secondPromise().catch().then(//what you want)

The above promise chain can achieve this. Final then would be called in all scenarios . catch would propagate the promise rejections.

edited Jan 03 '17 at 19:53

answered Jan 03 '17 at 19:26

raj

5,989
7
30
62

Looks like I did not ask the question correctly. The `finally` should be called only when both promises are done (reject or resolve). I want to wait for all the promises to be done. So this will not work properly. – vroy Jan 03 '17 at 19:43

score 0 · Answer 3 · answered Jan 03 '17 at 19:55

0

Can you use?

Promise.All([array of promises],handler)

Promise.All Docs

Or libraries like BlueBird or Asyncjs?

answered Jan 03 '17 at 19:55

blckt

81
8

georgeawg · Accepted Answer · 2017-01-03T21:24:15.353

0

Normally $q.all resolves rejected on the first promise that gets rejected and doesn't wait for the other promises. To wait for all promise to resolve either fulfilled or rejected, make resiliant versions of each promise, then use $q.all on those:

var resiliantFirstPromise = firstPromise.catch(e => "CONVERTED");
var resiliantSecondPromise = secondPromise.catch(e => "CONVERTED");

$q.all([resiliantFirstPromise, resiliantSecondPromise])
  .then(() => {
    console.log("Both promises have resolved");
});

By returning a value to the .catch method, each promise that is rejected returns a derived promise that has been converted to a fulfilled promise. Since neither derived promise is rejected, the $q.all will wait for both promises to be resolved (either fulfilled or rejected.)

edited Jan 03 '17 at 21:24

answered Jan 03 '17 at 21:08

georgeawg

48,608
13
72
95

This looks neat and works well! I got confused with **both promises to be resolved** part, as **resolve** often means **fulfilled**. So would be a better idea to change it to "..to be settled (either fulfilled or rejected)" – vroy Jan 03 '17 at 22:20
While I agree some people losely use *resolved* to mean *resolved fulfilled*, the [Promises/A+ Spec](https://promisesaplus.com/) uses the term "resolution" to mean change from the "pending" state to either "fulfilled" or "rejected". I would rather stick with that terminology than introduce a new word. See [Promises/A+ The Promise Resolution Procedure](https://promisesaplus.com/#point-45). – georgeawg Jan 03 '17 at 22:38

How to have single finally handler for multiple promises in AngularJS?

4 Answers4