Wait until all promises complete even if some rejected

Question

Let s say I have a set of Promises that are making network requests  of which one will fail      http   does-not-exist will throw a TypeError var arr     fetch  index html    fetch  http   does-not-exist      Promise all arr     then res   gt  console log  success   res      catch err   gt  console log  error   err      This is executed      Let s say I want to wait until all of these have finished  regardless of if one has failed  There might be a network error for a resource that I can live without  but which if I can get  I want before I proceed  I want to handle network failures gracefully   Since Promises all doesn t leave any room for this  what is the recommended pattern for handling this  without using a promises library

User · Answer

Here s my custom settledPromiseAll     const settledPromiseAll   function promisesArray      var savedError     const saveFirstError   function error        if   savedError  savedError   error         const handleErrors   function value        return Promise resolve value  catch saveFirstError          const allSettled   Promise all promisesArray map handleErrors       return allSettled then function resolvedPromises        if  savedError  throw savedError      return resolvedPromises             Compared to Promise all   If all promises are resolved  it performs exactly as the standard one  If one of more promises are rejected  it returns the first one rejected much the same as the standard one but unlike it waits for all promises to resolve reject    For the brave we could change Promise all      function       var stdAll   Promise all     Promise all   function values  wait        if  wait        return stdAll call Promise  values        return settledPromiseAll values               CAREFUL  In general we never change built-ins  as it might break other unrelated JS libraries or clash with future changes to JS standards   My settledPromiseall is backward compatible with Promise all and extends its functionality   People who are developing standards -- why not include this to a new Promise standard

User · Answer

There is a finished proposal for a function which can accomplish this natively  in vanilla Javascript  Promise allSettled  which has made it to stage 4  is officialized in ES2020  and is implemented in all modern environments  It is very similar to the reflect function in this other answer  Here s an example  from the proposal page  Before  you would have had to do   function reflect promise      return promise then       v    gt          return   status   fulfilled   value  v                error    gt          return   status   rejected   reason  error                  const promises     fetch  index html    fetch  https   does-not-exist       const results   await Promise all promises map reflect    const successfulPromises   results filter p   gt  p status      fulfilled      Using Promise allSettled instead  the above will be equivalent to   const promises     fetch  index html    fetch  https   does-not-exist       const results   await Promise allSettled promises   const successfulPromises   results filter p   gt  p status      fulfilled      Those using modern environments will be able to use this method without any libraries  In those  the following snippet should run without problems    x000D   x000D  Promise allSettled   x000D    Promise resolve  a    x000D    Promise reject  b   x000D     x000D     then console log   x000D   x000D   x000D    Output              status    fulfilled        value    a                status    rejected        reason    b            For older browsers  there is a spec-compliant polyfill here

User · Answer

I know that this question has a lot of answers  and I m sure must  if not all  are correct  However it was very hard for me to understand the logic flow of these answers   So I looked at the Original Implementation on Promise all    and I tried to imitate that logic - with the exception of not stopping the execution if one Promise failed      public promiseExecuteAll promisesList  Promise lt any gt           Promise lt   data  any  isSuccess  boolean     gt          let promise  Promise lt   data  any  isSuccess  boolean     gt        if  promisesList length              const result    data  any  isSuccess  boolean                 let count  number   0         promise   new Promise lt   data  any  isSuccess  boolean     gt   resolve  reject    gt                  promisesList forEach  currentPromise  Promise lt any gt   index  number    gt                      currentPromise then               data    gt     Success                             result index      data  isSuccess  true                  if  promisesList length  lt     count    resolve result                                 data    gt     Error                             result index      data  isSuccess  false                  if  promisesList length  lt     count    resolve result                                                     else             promise   Promise resolve                 return promise        Explanation   - Loop over the input promisesList and execute each Promise  - No matter if the Promise resolved or rejected  save the Promise s result in a result array according to the index  Save also the resolve reject status  isSuccess   - Once all Promises completed  return one Promise with the result of all others   Example of use   const p1   Promise resolve  OK    const p2   Promise reject new Error   -      const p3   Promise resolve 1000    promiseExecuteAll  p1  p2  p3   then  data    gt      data forEach value   gt  console log     value isSuccess    Resolve     Reject     gt  gt     value data               Output   Resolve  gt  gt  OK Reject  gt  gt   -  Resolve  gt  gt  1000

User · Answer

I would do   var err    fetch  index html   then  success    gt    return Promise resolve success      catch  e    gt    return Promise resolve e       fetch  http   does-not-exist   then  success    gt    return Promise resolve success      catch  e    gt    return Promise resolve e         Promise all err   then function  res    console log  success   res      catch function  err    console log  error   err       never executed

User · Answer

Update  you probably want to use the built-in native Promise allSettled   Promise allSettled  promise   then   result     gt         reach here regardless        status   fulfilled   value  33        As a fun fact  this answer below was prior art in adding that method to the language       Sure  you just need a reflect   const reflect   p   gt  p then v   gt    v  status   fulfilled                                  e   gt    e  status   rejected        reflect promise  then  v   gt        console log v status         Or with ES5   function reflect promise       return promise then function v   return  v v  status   fulfilled                              function e   return  e e  status   rejected           reflect promise  then function v       console log v status         Or in your example   var arr     fetch  index html    fetch  http   does-not-exist      Promise all arr map reflect   then function results       var success   results filter x   gt  x status      fulfilled

User · Answer

Benjamin s answer offers a great abstraction for solving this issue  but I was hoping for a less abstracted solution  The explicit way to to resolve this issue is to simply call  catch on the internal promises  and return the error from their callback   let a   new Promise  res  rej    gt  res  Resolved          b   new Promise  res  rej    gt  rej  Rejected          c   a catch e   gt    console log   a  failed     return e          d   b catch e   gt    console log   b  failed     return e       Promise all  c  d      then result   gt  console log  Then   result      Then   Resolved     Rejected       catch err   gt  console log  Catch   err     Promise all  a catch e   gt  e   b catch e   gt  e       then result   gt  console log  Then   result      Then   Resolved     Rejected       catch err   gt  console log  Catch   err        Taking this one step further  you could write a generic catch handler that looks like this   const catchHandler   error   gt     payload  error  resolved  false       then you can do   gt  Promise all  a  b  map promise   gt  promise catch catchHandler        then results   gt  console log results        catch      gt  console log  Promise all failed     lt     Resolved       payload  Promise  resolved  false       The problem with this is that the caught values will have a different interface than the non-caught values  so to clean this up you might do something like   const successHandler   result   gt     payload  result  resolved  true       So now you can do this    gt  Promise all  a  b  map result   gt  result then successHandler  catch catchHandler        then results   gt  console log results filter result   gt  result resolved        catch      gt  console log  Promise all failed     lt     Resolved       Then to keep it DRY  you get to Benjamin s answer   const reflect   promise   gt  promise    then successHandler     catch catchHander    where it now looks like   gt  Promise all  a  b  map result   gt  result then successHandler  catch catchHandler        then results   gt  console log results filter result   gt  result resolved        catch      gt  console log  Promise all failed     lt     Resolved         The benefits of the second solution are that its abstracted and DRY  The downside is you have more code  and you have to remember to reflect all your promises to make things consistent   I would characterize my solution as explicit and KISS  but indeed less robust  The interface doesn t guarantee that you know exactly whether the promise succeeded or failed   For example you might have this   const a   Promise resolve new Error  Not beaking  just bad     const b   Promise reject new Error  This actually didnt work       This won t get caught by a catch  so   gt  Promise all  a  b  map promise   gt  promise catch e   gt  e        then results   gt  console log results    lt    Error  Error     There s no way to tell which one was fatal and which was wasn t  If that s important then you re going to want to enforce and interface that tracks whether it was successful or not  which reflect does    If you just want to handle errors gracefully  then you can just treat errors as undefined values    gt  Promise all  a catch      gt  undefined   b catch      gt  undefined         then  results    gt  console log  Known values     results filter x   gt  typeof x      undefined      lt     Resolved       In my case  I don t need to know the error or how it failed--I just care whether I have the value or not  I ll let the function that generates the promise worry about logging the specific error   const apiMethod        gt  fetch      catch error   gt        console log error message       throw error          That way  the rest of the application can ignore its error if it wants  and treat it as an undefined value if it wants   I want my high level functions to fail safely and not worry about the details on why its dependencies failed  and I also prefer KISS to DRY when I have to make that tradeoff--which is ultimately why I opted to not use reflect

User · Answer

This should be consistent with how Q does it   if  Promise allSettled        Promise allSettled   function  promises            return Promise all promises map p   gt  Promise resolve p  then v   gt                 state   fulfilled               value  v              r   gt                 state   rejected               reason  r

User · Answer

I just wanted a polyfill that exactly replicated ES2020 behaviour since I m locked into node versions a lot earlier than 12 9  when Promise allSettled appeared   unfortunately  So for what it s worth  this is my version  const settle    promise    gt   promise instanceof Promise      promise then val   gt     value  val  status   quot fulfilled quot                     err   gt     reason  err  status   quot rejected quot            value  promise  status   fulfilled      const allSettled   async  parr    gt  Promise all parr map settle     This handles a mixed array of promise and non-promise values  as does the ES version  It hands back the same array of   status  value reason   objects as the native version

User · Answer

You can execute your logic sequentially via synchronous executor nsynjs  It will pause on each promise  wait for resolution rejection  and either assign resolve s result to data property  or throw an exception  for handling that you will need try catch block   Here is an example    x000D   x000D  function synchronousCode     x000D      function myFetch url    x000D          try   x000D              return window fetch url  data  x000D            x000D          catch  e    x000D              return  status   failed   e   x000D             x000D         x000D      var arr   x000D          myFetch  https   ajax googleapis com ajax libs jquery 2 0 0 jquery min js    x000D          myFetch  https   ajax googleapis com ajax libs jquery 2 0 0 NONEXISTANT js    x000D          myFetch  https   ajax NONEXISTANT123 com ajax libs jquery 2 0 0 NONEXISTANT js   x000D         x000D       x000D      console log  array is ready   arr 0  status arr 1  status arr 2  status   x000D     x000D   x000D  nsynjs run synchronousCode    function    x000D      console log  done    x000D      x000D   lt script src  https   rawgit com amaksr nsynjs master nsynjs js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

var err  Promise all       promiseOne   catch function error    err   error         promiseTwo   catch function error    err   error       then function         if  err            throw err              The Promise all will swallow any rejected promise and store the error in a variable  so it will return when all of the promises have resolved  Then you can re-throw the error out  or do whatever  In this way  I guess you would get out the last rejection instead of the first one

User · Answer

Benjamin Gruenbaum answer is of course great    But I can also see were Nathan Hagen point of view with the level of abstraction seem vague   Having short object properties like e  amp  v don t help either  but of course that could be changed    In Javascript there is standard Error object  called Error    Ideally you always throw an instance   descendant of this   The advantage is that you can do instanceof Error  and you know something is an error   So using this idea  here is my take on the problem   Basically catch the error  if the error is not of type Error  wrap the error inside an Error object   The resulting array will have either resolved values  or Error objects you can check on     The instanceof inside the catch  is in case you use some external library that maybe did reject  error    instead of reject new Error  error      Of course you could have promises were you resolve an error  but in that case it would most likely make sense to treat as an error anyway  like the last example shows   Another advantage of doing it this  array destructing is kept simple   const  value1  value2    PromiseAllCatch promises   if    value1 instanceof Error   console log value1     Instead of   const   v  value1  e  error1    v  value2  e  error2     Promise all reflect   if   error1    console log value1       You could argue that the  error1 check is simpler than an instanceof  but your also having to destruct both v  amp  e      x000D   x000D  function PromiseAllCatch promises    x000D    return Promise all promises map async m   gt    x000D      try   x000D        return await m  x000D        catch e    x000D        if  e instanceof Error  return e  x000D        return new Error e   x000D        x000D         x000D    x000D   x000D   x000D  async function test     x000D    const ret   await PromiseAllCatch   x000D       async      gt   this is fine      x000D       async      gt   throw new Error  oops        x000D       async      gt   this is ok      x000D       async      gt   throw  Still an error        x000D       async      gt  new Error  resolved Error       x000D        x000D    console log ret   x000D    console log ret map r   gt  x000D      r instanceof Error    error     ok  x000D        join           x000D    x000D   x000D  test    x000D   x000D   x000D

User · Answer

Promise all with using modern async await approach  const promise1         const promise2          const data   await Promise all  promise1  promise2    const dataFromPromise1   data 0  const dataFromPromise2   data 1

User · Answer

Instead of rejecting  resolve it with a object  You could do something like this when you are implementing promise   x000D   x000D  const promise   arg   gt    x000D    return new Promise  resolve  reject    gt    x000D        setTimeout      gt    x000D          try  x000D            if arg    2  x000D              return resolve  success  true  data  arg    x000D            else x000D              throw new Error arg  x000D           catch e   x000D            return resolve  success  false  error  e  data  arg   x000D            x000D           1000   x000D       x000D    x000D   x000D  Promise all  1 2 3 4 5  map e   gt  promise e    then d   gt  console log d   x000D   x000D   x000D

User · Answer

I think the following offers a slightly different approach    compare fn fast fail   with fn slow fail      though the latter doesn t fail as such    you can check if one or both of a and b is an instance of Error and throw that Error if you want it to reach the catch block  e g  if  b instanceof Error    throw b        See the jsfiddle   var p1   new Promise  resolve  reject    gt         setTimeout      gt  resolve  p1 delayed resolvement    2000          var p2   new Promise  resolve  reject    gt        reject new Error  p2 immediate rejection          var fn fast fail   async function          try           var  a  b    await Promise all  p1  p2            console log a       p1 delayed resolvement          console log b       Error  p2 immediate rejection        catch  err            console log  ERROR    err            var fn slow fail   async function          try           var  a  b    await Promise all               p1 catch error   gt    return error                 p2 catch error   gt    return error                        console log a       p1 delayed resolvement          console log b       Error  p2 immediate rejection        catch  err               we don t reach here unless you throw the error from the  try  block         console log  ERROR    err            fn fast fail       fails immediately fn slow fail       waits for delayed promise to resolve

User · Answer

I had the same problem and have solved it in the following way   const fetch    url    gt      return node-fetch url       then result   gt  result json         catch  e    gt          return new Promise  resolve    gt  setTimeout      gt  resolve fetch url    timeout                tasks    fetch url1   fetch url2          Promise all tasks  then           In that case Promise all will wait for every Promise will come into resolved or rejected state   And having this solution we are  stopping catch execution  in a non-blocking way  In fact  we re not stopping anything  we just returning back the Promise in a pending state which returns another Promise when it s resolved after the timeout

User · Answer

Similar answer  but more idiomatic for ES6 perhaps    x000D   x000D  const a   Promise resolve 1   x000D  const b   Promise reject new Error 2    x000D  const c   Promise resolve 3   x000D   x000D  Promise all  a  b  c  map p   gt  p catch e   gt  e    x000D     then results   gt  console log results      1 Error  2 3 x000D     catch e   gt  console log e    x000D   x000D   x000D  const console     log  msg   gt  div innerHTML    msg     lt br gt     x000D   lt div id  div  gt  lt  div gt  x000D   x000D   x000D    Depending on the type s  of values returned  errors can often be distinguished easily enough  e g  use undefined for  don t care   typeof for plain non-object values  result message  result toString   startsWith  Error    etc

User · Answer

I ve been using following codes since ES5   Promise wait   function promiseQueue       if   Array isArray promiseQueue             return Promise reject  Given parameter is not an array                if  promiseQueue length     0            return Promise resolve                 return new Promise  resolve  reject    gt           let  pQueue      rQueue      readyCount false          promiseQueue forEach   promise  idx    gt                  Create a status info object              rQueue push  rejected false  seq idx  result null                 pQueue push Promise resolve  promise                          pQueue forEach   promise  idx   gt               let item    rQueue idx                promise then                   result   gt                       item resolved   true                      item result   result                                      error   gt                       item resolved   false                      item result   error                                  then     gt                    readyCount                     if    rQueue length      readyCount                         let result   true                       rQueue forEach  item   gt  result result amp  amp item resolved                          result resolve reject   rQueue                                                              The usage signature is just like Promise all  The major difference is that Promise wait will wait for all the promises to finish their jobs

User · Answer

I really like Benjamin s answer  and how he basically turns all promises into always-resolving-but-sometimes-with-error-as-a-result ones     Here s my attempt at your request just in case you were looking for alternatives  This method simply treats errors as valid results  and is coded similar to Promise all otherwise   Promise settle   function promises      var results         var done   promises length     return new Promise function resolve        function tryResolve i  v          results i    v        done   done - 1        if  done    0          resolve results              for  var i 0  i lt promises length  i          promises i  then tryResolve bind null  i   tryResolve bind null  i        if  done    0        resolve results

User · Answer

I don t know which promise library you are using  but most have something like allSettled   Edit  Ok since you want to use plain ES6 without external libraries  there is no such method   In other words  You have to loop over your promises manually and resolve a new combined promise as soon as all promises are settled

[javascript] Wait until all promises complete even if some rejected

Examples related to javascript

Examples related to promise

Examples related to es6-promise