How to know when all Promises are Resolved in a dynamic “iterable” parameter?

by

You can make a neat little recursive function to wrap Promise.all to handle additions to the original promise:

/**
 * Returns a Promise that resolves to an array of inputs, like Promise.all.
 *
 * If additional unresolved promises are added to the passed-in iterable or
 * array, the returned Promise will additionally wait for those, as long as
 * they are added before the final promise in the iterable can resolve.
 */
function iterablePromise(iterable) {
  return Promise.all(iterable).then(function(resolvedIterable) {
    if (iterable.length != resolvedIterable.length) {
      // The list of promises or values changed. Return a new Promise.
      // The original promise won't resolve until the new one does.
      return iterablePromise(iterable);
    }
    // The list of promises or values stayed the same.
    // Return results immediately.
    return resolvedIterable;
  });
}

/* Test harness below */

function timeoutPromise(string, timeoutMs) {
  console.log("Promise created: " + string + " - " + timeoutMs + "ms");
  return new Promise(function(resolve, reject) {
    window.setTimeout(function() {
      console.log("Promise resolved: " + string + " - " + timeoutMs + "ms");
      resolve();
    }, timeoutMs);
  });
}

var list = [timeoutPromise('original', 1000)];
timeoutPromise('list adder', 200).then(function() {
  list.push(timeoutPromise('newly created promise', 2000));
});
iterablePromise(list).then(function() { console.log("All done!"); });

In ES6 with lambdas and without comments, this can be even shorter:

function iterablePromise(iterable) {
  return Promise.all(iterable).then((resolvedIterable) => {
    if (iterable.length != resolvedIterable.length) {
      return iterablePromise(iterable);
    }
    return resolvedIterable;
  });
}

Or, as Rads expressed with async/await in their answer, but as a function:

async function iterablePromise(iterable) {
  let resolvedIterable = [];
  while (iterable.length !== resolvedIterable.length) {
    resolvedIterable = await Promise.all(iterable);  // implicit "then"
  }
  return resolvedIterable;
}

Bear in mind that this only covers addition, and that it’s still a little dangerous: You need to ensure that the callback order is such that any promises in flight add themselves to the list before the Promises.all callback can be invoked.

More Related Contents:

  1. How to return many Promises and wait for them all before doing other stuff
  2. When is the body of a Promise executed?
  3. ES6 Promise.all() error handle – Is .settle() needed? [duplicate]
  4. Why do I need to await an async function when it is not supposedly returning a Promise?
  5. Why does the Promise constructor require a function that calls ‘resolve’ when complete, but ‘then’ does not – it returns a value instead?
  6. Is there a way to tell if an ES6 promise is fulfilled/rejected/resolved? [duplicate]
  7. What is the best general practice to timeout a function in promise [closed]
  8. When would someone need to create a deferred?
  9. Promises, pass additional parameters to then chain
  10. How to extract data out of a Promise
  11. Are JavaScript forever-pending promises bad?
  12. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  13. Why does javascript ES6 Promises continue execution after a resolve?
  14. JavaScript asynchronous programming: promises vs generators
  15. ES6 Promise replacement of async.eachLimit / async.mapLimit
  16. Why does JavaScript Promise then handler run after other code?
  17. When is the body of a Promise constructor callback executed?
  18. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  19. What is destructuring assignment and its uses?
  20. ES6 class variable alternatives
  21. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  22. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  23. Unexpected behavior using Array Map on an Array Initialized with Array Fill
  24. What does @@ (“at at”) mean in ES6 JavaScript?
  25. ES6 tagged templates practical usability
  26. Wrap long template literal line to multiline without creating a new line in the string
  27. Importing javascript file for use within vue component
  28. Returning an Axios Promise from function
  29. Is it possible to use axios.all with a then() for each promise?
  30. Return object with default values from an array in JavaScript

Leave a Comment