Why does the Promise constructor require a function that calls ‘resolve’ when complete, but ‘then’ does not – it returns a value instead?

by

Bergi’s answer is excellent, and has been very helpful to me. This answer is complementary to his. In order to visualize the relationship between the Promise() constructor and the then() method, I created this diagram. I hope it helps somebody… maybe even me, a few months months from now.

The main idea here is that the “executor” function passed to the Promise() constructor sets tasks in motion that will set the state of the promise; whereas the handlers you pass to then() will react to the state of the promise.

Diagram: Promise() executor vs. then() method
(Code examples adapted from Jake Archibald’s classic tutorial.)

This is a highly simplified view of how things work, leaving out many important details. But I think if one can keep a grip on a good overview of the intended purpose, it will help avoid confusion when one gets into the details.

A couple of selected details

The executor is called immediately

One important detail is that the executor function passed to the Promise() constructor is called immediately (before the constructor returns the promise); whereas the handler functions passed to the then() method will not be called till later (if ever).

Bergi mentioned this, but I wanted to restate it without using the terms a/synchronously, which can be confused if you’re not reading carefully: The distinction between a function calling something asynchronously vs. being called asynchronously is easy to gloss over in communication.

resolve() is not onFulfill()

One more detail I’d like to emphasize, because it confused me for a while, is that the resolve() and reject() callbacks passed to the Promise() constructor’s executor function are not the callbacks later passed to the then() method. This seems obvious in retrospect, but the apparent connection had me spinning in circles for too long. There is definitely a connection, but it’s a loose, dynamic one.

Instead, the resolve() and reject() callbacks are functions supplied by the “system”, and are passed to the executor function by the Promise constructor when you create a promise. When the resolve() function is called, system code is executed that potentially changes the state of the promise and eventually leads to an onFulfilled() callback being called asynchronously. Don’t think of calling resolve() as being a tight wrapper for calling onFulfill()!

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. What is the best general practice to timeout a function in promise [closed]
  5. When would someone need to create a deferred?
  6. Promises, pass additional parameters to then chain
  7. How to extract data out of a Promise
  8. Are JavaScript forever-pending promises bad?
  9. Why does javascript ES6 Promises continue execution after a resolve?
  10. ES6 Promise replacement of async.eachLimit / async.mapLimit
  11. Why does JavaScript Promise then handler run after other code?
  12. When is the body of a Promise constructor callback executed?
  13. How do I access previous promise results in a .then() chain?
  14. Wait until all promises complete even if some rejected
  15. Can I fire and forget a promise in nodejs (ES7)?
  16. Promise.all: Order of resolved values
  17. How can I fetch an array of URLs with Promise.all?
  18. Is the Promise constructor callback executed asynchronously?
  19. What is the order of execution in JavaScript promises?
  20. How can I synchronously determine a JavaScript Promise’s state?
  21. Do I need to return after early resolve/reject?
  22. Resolve Javascript Promise outside the Promise constructor scope
  23. multiple, sequential fetch() Promise
  24. Should a Promise.reject message be wrapped in Error?
  25. Why can I not throw inside a Promise.catch handler?
  26. Filtering an array with a function that returns a promise
  27. Why does the Promise object block rendering?
  28. Creating a (ES6) promise without starting to resolve it
  29. Promise.all is returning an array of undefined and resolves before being done
  30. Promise.resolve().then vs setImmediate vs nextTick

Leave a Comment