Understanding javascript promises; stacks and chaining

by

You are illustrating the different between chaining and branching. Chaining wil sequence multiple async operations so one starts when the prior one finishes and you can chain an arbitrary number of items to sequence one after the other.

Branching hooks up multiple async operations to all be in flight at the same time when one trigger operation completes.

Implementations 1 and 3 are the same. They are chained. Implementation 3 just uses a temporary variable to chain, whereas implementation 1 just uses the return value from .then() directly. No difference in execution. These .then() handlers will be called in serial fashion.

Implementation 2 is different. It is branched, not chained. Because all subsequent .then() handlers are attached to the exact same serverSidePromiseChain promise, they all wait only for the first promise to be resolved and then all subsequent async operations are all in flight at the same time (not serially as in the other two options).

It may be helpful in understand this to dive one level down into how this works with promises.

When you do (scenarios 1 and 3):

p.then(...).then(...)

What happens is as follows:

  1. The interpreter takes your p variable, finds the .then() method on it and calls it.
  2. The .then() method just stores the callback it was passed and then returns a new promise object. It does not call its callback at this time. This new promise object is tied to both the original promise object and to the callback that it stored. It will not resolve until both are satisfied.
  3. Then the second .then() handler on that newly returned promise is called. Again, the .then() handler on that promise just stores the .then() callbacks and they are not yet executed.
  4. Then sometime in the future, the original promise p gets resolved by its own async operation. When it gets resolved, it then calls any resolve handlers that it stores. One of those handlers will be the callback to the first .then() handler in the above chain. If that callback runs to completion and returns either nothing or a static value (e.g. doesn’t return a promise itself), then it will resolve the promise that it created to return after .then() was first called. When that promise is resolved, it will then call the resolve handlers installed by the second .then() handler above and so on.

When you do this (scenario 2):

p.then();
p.then();

The one promise p here has stored resolve handlers from both the .then() calls. When that original promise p is resolved, it will call both of the .then() handlers. If the .then() handlers themselves contain async code and return promises, these two async operations will be in flight at the same time (parallel-like behavior), not in sequence as in scenario 1 and 3.

More Related Contents:

  1. How to wait until promise finishes before continuing the loop
  2. How do I access previous promise results in a .then() chain?
  3. Chained promises not passing on rejection
  4. How do I promisify native XHR?
  5. How to synchronize a sequence of promises?
  6. How to make a promise from setTimeout
  7. Promise.all: Order of resolved values
  8. How can I fetch an array of URLs with Promise.all?
  9. Does never resolved promise cause memory leak?
  10. How can I synchronously determine a JavaScript Promise’s state?
  11. What does $.when.apply($, someArray) do?
  12. Why is ‘this’ undefined inside class method when using promises? [duplicate]
  13. NodeJS Timeout a Promise if failed to complete in time
  14. How can i return status inside the promise?
  15. How to make chainable function in JavaScript?
  16. Promise.resolve vs new Promise(resolve)
  17. Throwing an Error in jQuery’s Deferred object
  18. Placement of catch BEFORE and AFTER then
  19. TypeError: Cannot read property ‘then’ of undefined
  20. Promise chain continues before inner promise is resolved
  21. What is the best general practice to timeout a function in promise [closed]
  22. How to handle HTTP code 4xx responses in fetch api
  23. Using setInterval() with a .map method in array and returning as a promise
  24. Creating a (ES6) promise without starting to resolve it
  25. Are there differences between .then(functionReference) and .then(function(value){return functionReference(value)})?
  26. Is there a way to know if a link/script is still pending or has it failed
  27. Return value from a Promise constructor
  28. How do you properly promisify request?
  29. Implement async/await in sort function of arrays javascript
  30. Promise.resolve().then vs setImmediate vs nextTick

Leave a Comment