What does the function then() mean in JavaScript -

i've been seeing code looks like:

myobj.dosome("task").then(function(env) {     // logic }); 

where then() come from?

the traditional way deal asynchronous calls in javascript has been callbacks. had make 3 calls server, 1 after other, set our application. callbacks, code might following (assuming xhrget function make server call):

// fetch server configuration     xhrget('/api/server-config', function(config) {         // fetch user information, if he's logged in         xhrget('/api/' + config.user_end_point, function(user) {             // fetch items user             xhrget('/api/' + user.id + '/items', function(items) {                 // display items here             });         });     }); 

in example, first fetch server configuration. based on that, fetch information current user, , list of items current user. each xhrget call takes callback function executed when server responds.

now of course more levels of nesting have, harder code read, debug, maintain, upgrade, , work with. known callback hell. also, if needed handle errors, need possibly pass in function each xhrget call tell needs in case of error. if wanted have 1 common error handler, not possible.

the promise api designed solve nesting problem , problem of error handling.

the promise api proposes following:

1. each asynchronous task return promise object.
2. each promise object have then function can take 2 arguments, success handler , error handler.
3. the success or error handler in then function called once, after asynchronous task finishes.
4. the then function return promise, allow chaining multiple calls.
5. each handler (success or error) can return value, passed next function argument, in chain of promises.
6. if handler returns promise (makes asynchronous request), next handler (success or error) called after request finished.

so previous example code might translate following, using promises , $http service(in angularjs):

$http.get('/api/server-config').then(     function(configresponse) {         return $http.get('/api/' + configresponse.data.user_end_point);     } ).then(     function(userresponse) {         return $http.get('/api/' + userresponse.data.id + '/items');     } ).then(     function(itemresponse) {         // display items here     },      function(error) {         // common error handling     } ); 

propagating success , error

chaining promises powerful technique allows accomplish lot of functionality, having service make server call, postprocessing of data, , return processed data controller. when work promise chains, there few things need keep in mind.

consider following hypothetical promise chain 3 promises, p1, p2, , p3. each promise has success handler , error handler, s1 , e1 p1, s2 , e2 p2, , s3 , e3 p3:

xhrcall()   .then(s1, e1) //p1   .then(s2, e2) //p2   .then(s3, e3) //p3 

in normal flow of things, there no errors, application flow through s1, s2, , finally, s3. in real life, things never smooth. p1 might encounter error, or p2 might encounter error, triggering e1 or e2.

consider following cases:

• receive successful response server in p1, data returned not correct, or there no data available on server (think empty array). in such case, next promise p2, should trigger error handler e2.

• receive error promise p2, triggering e2. inside handler, have data cache, ensuring application can load normal. in case, might want ensure after e2, s3 called.

so each time write success or error handler, need make call—given our current function, promise success or failure next handler in promise chain?

if want trigger success handler next promise in chain, can return value success or error handler

if, on other hand, want trigger error handler next promise in chain, can using deferred object , calling reject() method

now deferred object?

deferred objects in jquery represents unit of work completed later, typically asynchronously. once unit of work completes, deferred object can set resolved or failed.

a deferred object contains promise object. via promise object can specify happen when unit of work completes. setting callback functions on promise object.

deferred objects in jquery : https://api.jquery.com/jquery.deferred/

deferred objects in angularjs : https://docs.angularjs.org/api/ng/service/$q