Promises for promises that are yet to be created without using the deferred [anti]pattern

by

Promises for promises that are yet to be created

…are easy to build by chaining a then invocation with the callback that creates the promise to a promise represents the availability to create it in the future.

If you are making a promise for a promise, you should never use the deferred pattern. You should use deferreds or the Promise constructor if and only if there is something asynchronous that you want to wait for, and it does not already involve promises. In all other cases, you should compose multiple promises.

When you say

When the API call is queued, the promise for the network request would be created at some point in the future

then you should not create a deferred that you can later resolve with the promise once it is created (or worse, resolve it with the promises results once the promise settles), but rather you should get a promise for the point in the future at which the network reqest will be made. Basically you’re going to write

return waitForEndOfQueue().then(makeNetworkRequest);

and of course we’re going to need to mutate the queue respectively.

var queue_ready = Promise.resolve(true);
function callAPI(params) {
  var result = queue_ready.then(function(API_available) {
    return doRealNetRequest(params);
  });
  queue_ready = result.then(function() {
    return true;
  });
  return result;
}

This has the additional benefit that you will need to explicitly deal with errors in the queue. Here, every call returns a rejected promise once one request failed (you’ll probably want to change that) – in your original code, the queue just got stuck (and you probably didn’t notice).

The second case is a bit more complicated, as it does involve a setTimeout call. This is an asynchronous primitive that we need to manually build a promise for – but only for the timeout, and nothing else. Again, we’re going to get a promise for the timeout, and then simply chain our API call to that to get the promise that we want to return.

function TimeoutQueue(timeout) {
  var data = [], timer = 0;
  this.promise = new Promise(resolve => {
    this.renew = () => {
      clearTimeout(timer);
      timer = setTimeout(resolve, timeout);
    };
  }).then(() => {
    this.constructor(timeout); // re-initialise
    return data;
  });
  this.add = (datum) => {
    data.push(datum);
    this.renew();
    return this.promise;
  };
}

var queue = new TimeoutQueue(10);
function callAPI2(data) {
  return queue.add(data).then(callAPI);
}

You can see here a) how the debouncing logic is completely factored out of callAPI2 (which might not have been necessary but makes a nice point) and b) how the promise constructor only concerns itself with the timeout and nothing else. It doesn’t even need to “leak” the resolve function like a deferred would, the only thing it makes available to the outside is that renew function which allows extending the timer.

More Related Contents:

  1. Chained promises not passing on rejection
  2. What are the differences between Deferred, Promise and Future in JavaScript?
  3. How to block for a javascript promise and return the resolved result? [duplicate]
  4. javascript promise not passing all arguments (using Q)
  5. When is .then(success, fail) considered an antipattern for promises?
  6. Is it bad practice to have a constructor function return a Promise?
  7. Resolve promises one after another (i.e. in sequence)?
  8. async/await always returns promise
  9. Building a promise chain recursively in javascript – memory considerations
  10. Cancel a vanilla ECMAScript 6 Promise chain
  11. Return from a promise then()
  12. How to sequentially run promises with Q in Javascript?
  13. Should an async API ever throw synchronously?
  14. Break promise chain and call a function based on the step in the chain where it is broken (rejected)
  15. Promise All with Axios
  16. Catching Errors in JavaScript Promises with a First Level try … catch
  17. How to support promises in Internet Explorer 11?
  18. using async await and .then together
  19. How to implement a pseudo blocking async queue in JS/TS?
  20. Javascript Promises with FileReader()
  21. While loop using bluebird promises
  22. Is it a good practice using Observable with async/await?
  23. Promises: Repeat operation until it succeeds?
  24. Ember transition & rendering complete event
  25. Typescript Promise rejection type
  26. Difference of using async / await vs promises?
  27. Promise.all().then() resolve?
  28. When or who does pass resolve and reject functions to JS promises?
  29. One time event handling using promises?
  30. What happens when promise is yielded in javascript?

Leave a Comment