javascript - Why does the Promise constructor require a function that calls 'resolve' when complete, but 'then' does not - it returns a value instead? -


as plunge studying promises, understanding has halted on following question not find discussed (all find specific discussions of promise constructor, , promise 'then' function - not discussion compares design patterns).


1. promise constructor

from mdn documentation, we have use of promise constructor (with comment added):

new promise(function(resolve, reject) { ... }); // <-- call stage 1 

function object 2 arguments resolve , reject. first argument fulfills promise, second argument rejects it. can call these functions, once our operation completed.


2. then function

moving on then function can called on promise object (which returns new promise object), have the following function signature described documentation (with comments added): :

p.then(onfulfilled, onrejected); 

chaining

because then method returns promise, can chain calls.

var p2 = new promise(function(resolve, reject) {   resolve(1); // <-- stage 1 again });  p2.then(function(value) {   console.log(value); // 1   return value + 1; // <-- call stage 2 }).then(function(value) {   console.log(value); // 2 }); 

my question

from above code snippet, seems clear me value passed resolve function in stage 1 (in second occurrence of resolve - beneath (2), above) passed on next stage (the first then function follows in same code snippet). there no return value @ stage 1. however, return value @ stage 2 passed on next stage after (the second then function).

is lack of correspondence between design pattern creation of promise, , use of then function on existing promise (which returns promise), historical fluke (one requires calling callback returns nothing, , other returns value not call callback)?

or missing underlying reason why promise constructor utilizes different design pattern then function?

bergi's answer excellent, , has been helpful me. answer complementary his. in order visualize relationship between promise() constructor , then() method, created diagram. hope helps somebody... maybe me, few months months now.

the main idea here "executor" function passed promise() constructor sets tasks in motion set state of promise; whereas handlers pass then() react state of promise.

diagram: promise() executor vs. then() method (code examples adapted jake archibald's classic tutorial.)

this highly simplified view of how things work, leaving out many important details. think if 1 can keep grip on overview of intended purpose, avoid confusion when 1 gets details.

a couple of selected details

the executor called immediately

one important detail executor function passed promise() constructor called immediately (before constructor returns promise); whereas handler functions passed then() method not called till later (if ever).

bergi mentioned this, wanted restate without using terms a/synchronously, can confused if you're not reading carefully: distinction between function calling asynchronously vs. being called asynchronously easy gloss on in communication.

resolve() not onfulfill()

one more detail i'd emphasize, because confused me while, resolve() , reject() callbacks passed promise() constructor's executor function are not callbacks later passed then() method. seems obvious in retrospect, apparent connection had me spinning in circles long. there connection, it's loose, dynamic one.

instead, resolve() , reject() callbacks functions supplied "system", , passed executor function promise constructor when create promise. when resolve() function called, system code executed potentially changes state of promise , leads onfulfilled() callback being called asynchronously. don't think of calling resolve() being tight wrapper calling onfulfill()!


Comments