The difference between returning a promise and returning undefined within a promise

I'm not sure I understand the difference between these two ordinary scenarios.

Say we have this:

user.save().then(function(val){ anotherPromise1(val); }).then(function(val){ anotherPromise2(val); }).catch(function(err){ }); 

vs

 user.save().then(function(val){ return anotherPromise1(val); }).then(function(val){ return anotherPromise2(val); }).catch(function(err){ }); 

I know it matters, but how exactly?

+6
source share
2 answers

If you do not return the value from the then callback, you are effectively returning undefined . The next then callback will start immediately and see undefined as the permission value.

If you return the promise from the then callback, then second answer then waits for that promise (indirectly, but it doesn't really matter), and when that promise is resolved, gets the resolution value from that promise.

(This is described by the then specification in Promises / A + spec , but a bit by omission - 't explicitly mention what should happen if onFulfilled nothing, but in JavaScript a function call always gives you the resulting value if the function does not explicitly return something , undefined is the result of calling it. JavaScript has no concept of void methods a'la C / C # / C ++ / Java.)

You can see it in this live copy script on Babel REPL :

 let start = Date.now(); function elapsed() { let rv = String(Date.now() - start); while (rv.length < 4) { rv = "0" + rv; } return rv; } function anotherPromise(type, val) { console.log(`${elapsed()}: anotherPromise[${type}] got ${val}`); return new Promise(resolve => { setTimeout(() => { resolve(val * 2); }, 1000); }); } function anotherPromise2(type, val) { console.log(`${elapsed()}: anotherPromise2[${type}] got ${val}`); return new Promise(resolve => { setTimeout(() => { resolve(val * 3); }, 10); }); } let user = { save: () => { return new Promise(resolve => { setTimeout(() => { resolve(42); }, 10); }); } } // Without return user.save().then(function(val){ anotherPromise("without", val); }).then(function(val){ anotherPromise2("without", val); }).then(function() { console.log(`${elapsed()}: All done`); }).catch(function(err){ }); user.save().then(function(val){ return anotherPromise("with", val); }).then(function(val){ return anotherPromise2("with", val); }).then(function() { console.log(`${elapsed()}: All done`); }).catch(function(err){ }); 

Output (for example):

  0015: anotherPromise [without] got 42
 0017: anotherPromise2 [without] got undefined
 0018: All done
 0020: anotherPromise [with] got 42
 1021: anotherPromise2 [with] got 84
 1032: All done

Note the differences between no return and return:

  • Without, anotherPromise2 was called immediately (as we can see from the past time values) and received undefined .

  • C, anotherPromise2 waiting for anotherPromise permission, and then got 84 ( anotherPromise permission value)

+9
source

The difference lies in the timing in this matter.

In example 1, the save promise is filled and anotherPromise1 will be called, and since there is no promised promise, anotherPromise2 will be called immediately.

If you return the promise of the function anotherPromise1 , anotherPromise1 will be called after anotherPromise1 is resolved.

So, example 1: anotherPromise1 and anotherPromise2 will be removed simultaneously. While example 2: anotherPromise2 will wait for anotherPromise1 to anotherPromise1

+2
source

All Articles