What does the function then mean in JavaScript

Question

I   ve been seeing code that looks like   myObj doSome  task   then function env           logic       Where does then   come from

User · Answer

To my knowledge  there isn t a built-in then   method in javascript  at the time of this writing    It appears that whatever it is that doSome  task   is returning has a method called then   If you log the return result of doSome   to the console  you should be able to see the properties of what was returned   console log  myObj doSome  task         Expand the returned object in the                                           console to see its properties    UPDATE  As of ECMAScript6   -  The  then   function has been included to pure javascript    From the Mozilla documentation here      The then   method returns a Promise  It takes two arguments  callback   functions for the success and failure cases of the Promise    The Promise object  in turn  is defined as     The Promise object is used for deferred and asynchronous   computations  A Promise represents an operation that hasn t completed   yet  but is expected in the future    That is  the Promise acts as a placeholder for a value that is not yet computed  but shall be resolved in the future  And the  then   function is used to associate the functions to be invoked on the Promise when it is resolved - either as a success or a failure

User · Answer

then   function is related to  Javascript promises  that are used in some libraries or frameworks like jQuery or AngularJS   A promise is a pattern for handling asynchronous operations  The promise allows you to call a method called  then  that lets you specify the function s  to use as the callbacks   For more information see  http   wildermuth com 2013 8 3 JavaScript Promises  And for Angular promises  http   liamkaufman com blog 2013 09 09 using-angularjs-promises

User · Answer

Here is a small JS Fiddle   then is a method callback stack which is available after a promise is resolved it is part of library like jQuery but now it is available in native JavaScript and below is the detail explanation how it works  You can do a Promise in native JavaScript   just like there are promises in jQuery  Every promise can be stacked and then can be called with Resolve and Reject callbacks  This is how you can chain asynchronous calls   I forked and Edited from MSDN Docs on Battery charging status     What this does is try to find out if user laptop or device is charging battery  then is called and you can do your work post success    navigator      getBattery        then function battery           var charging   battery charging         alert charging               then function   alert  YeoMan   SINGH is King            Another es6 Example  function fetchAsync  url  timeout  onData  onError              let fetchPromised    url  timeout    gt        return new Promise  resolve  reject    gt            fetchAsync url  timeout  resolve  reject           Promise all       fetchPromised  http   backend foo txt   500       fetchPromised  http   backend bar txt   500       fetchPromised  http   backend baz txt   500     then  data    gt        let   foo  bar  baz     data     console log  success  foo   foo  bar   bar  baz   baz        err    gt        console log  error    err            Definition    then is a method used to solve Asynchronous callbacks       this is introduced in ES6       Please find the proper documentation here Es6 Promises

User · Answer

The   then    function is wideley used for promised objects in Asynchoronus programming For Windows 8 Store Apps  As far as i understood it works some way like a callback   Find Details in this Documentantion http   msdn microsoft com en-us library windows apps hh700330 aspx  Of Cause it could also be the name for any other defined function

User · Answer

The traditional way to deal with asynchronous calls in JavaScript has been with callbacks  Say we had to make three calls to the server  one after the other  to set up our application  With callbacks  the code might look something like the following  assuming a xhrGET function to make the server call       Fetch some server configuration     xhrGET   api server-config   function config               Fetch the user information  if he s logged in         xhrGET   api     config USER END POINT  function user                   Fetch the items for the user             xhrGET   api     user id     items   function items                       Actually display the items here                                       In this example  we first fetch the server configuration  Then based on that  we fetch information about the current user  and then finally get the list of items for the current user  Each xhrGET call takes a callback function that is executed when the server responds   Now of course the more levels of nesting we have  the harder the code is to read  debug  maintain  upgrade  and basically work with  This is generally known as callback hell  Also  if we needed to handle errors  we need to possibly pass in another function to each xhrGET call to tell it what it needs to do in case of an error  If we wanted to have just one common error handler  that is not possible      The Promise API was designed to solve this nesting problem and the   problem of error handling    The Promise API proposes the following    Each asynchronous task will return a promise object  Each promise object will have a then function that can take two arguments  a success handler and an error handler  The success or the error handler in the then function will be called only once  after the asynchronous task finishes  The then function will also return a promise  to allow chaining multiple calls  Each handler  success or error  can return a value  which will be passed to the next  function as an argument  in the chain of promises  If a handler returns a promise  makes another asynchronous request   then the next handler  success or error  will be called only after that request is finished    So the previous example code might translate to something like the following  using promises and the  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 and Error  Chaining promises is a very powerful technique that allows us to accomplish a lot of functionality  like having a service make a server call  do some postprocessing of the data  and then return the processed data to the controller  But when we work with promise chains  there are a few things we need to keep in mind   Consider the following hypothetical promise chain with three promises  P1  P2  and P3  Each promise has a success handler and an error handler  so S1 and E1 for P1  S2 and E2 for P2  and S3 and E3 for P3   xhrCall      then S1  E1    P1    then S2  E2    P2    then S3  E3    P3   In the normal flow of things  where there are no errors  the application would flow through S1  S2  and finally  S3  But in real life  things are never that smooth  P1 might encounter an error  or P2 might encounter an error  triggering E1 or E2   Consider the following cases       We receive a successful response from the server in P1  but the data returned is not correct  or there is no data available on the server  think empty array   In such a case  for the next promise P2  it should trigger the error handler E2       We receive an error for promise P2  triggering E2  But inside the handler  we have data from the cache  ensuring that the application can load as normal  In that case  we might want to ensure that after E2  S3 is called   So each time we write a success or an error handler  we need to make a call   given our current function  is this promise a success or a failure for the next handler in the promise chain   If we want to trigger the success handler for the next promise in the chain  we can just return a value from the success or the error handler  If  on the other hand  we want to trigger the error handler for the next promise in the chain  we can do that using a deferred object and calling its reject   method     Now What is deferred object       Deferred objects in jQuery represents a unit of work that will be   completed later  typically asynchronously  Once the unit of work   completes  the deferred object can be set to resolved or failed       A deferred object contains a promise object  Via the promise object   you can specify what is to happen when the unit of work completes  You   do so by setting callback functions on the promise object    Deferred objects in Jquery   https   api jquery com jquery deferred   Deferred objects in AngularJs   https   docs angularjs org api ng service  q

User · Answer

In this case then   is a class method of the object returned by doSome   method

User · Answer

I suspect doSome returns this  which is myObj  which also has a then method   Standard method chaining     if doSome is not returning this  being the object on which doSome was executed  rest assured it is returning some object with a then method     as  patrick points out  there is no then   for standard js

User · Answer

I am about 8 years late  well   anyways  I don t really know what then   does but maybe MDN might have an answer  Actually  I might actually understand it a little more   This will show you all the information  hopefully   you need  Unless someone already posted this link  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Promise then  The format is promise prototype then   The promise and prototype are kind of like variables but not like variables in javascript  I mean like other things go there like navigator getBattery   then   where this one actually exists but is barely used on the web  this one shows statuses about the battery of the device  more information and more on MDN if you are curious

User · Answer

doSome  task  must be returning a promise object   and that  promise always have a then function  So your code is just like this  promise then function env           logic        and you know this is just an ordinary call to member function

User · Answer

Here is a thing I made for myself to clear out how things work  I guess others too can find this concrete example useful    x000D   x000D  doit   then function     log  Now finally done        x000D  log  ---- But notice where this ends up     x000D   x000D     For pedagogical reasons I originally wrote the following doit  -function so that  x000D     it was clear that it is a promise  That way wasn t really a normal way to do  x000D     it though  and therefore Slikts edited my answer  I therefore now want to remind  x000D     you here that the return value of the following function is a promise  because  x000D     it is an async function  every async function returns a promise    x000D  async function doit     x000D    log  Calling someTimeConsumingThing    x000D    await someTimeConsumingThing    x000D    log  Ready with someTimeConsumingThing    x000D    x000D   x000D  function someTimeConsumingThing     x000D    return new Promise function resolve reject    x000D      setTimeout resolve  2000   x000D       x000D    x000D   x000D  function log txt    x000D    document getElementById  msg   innerHTML    txt     lt br gt   x000D    x000D   lt div id  msg  gt  lt  div gt  x000D   x000D   x000D

User · Answer

then returns a promise in async function   Good Example would be   var doSome   new Promise function resolve  reject       resolve  I am doing something         doSome then function value       console log value         To add another logic to it  you can also add the reject  I am the rejected param   call the function and console log it

User · Answer

Another example   x000D   x000D  new Promise function ok       ok            myFunc1 param1  param2                 then function            myFunc1 succeed            Launch something else            console log whateverparam1             myFunc2 whateverparam1  otherparam            then function            myFunc2 succeed            Launch something else            myFunc3 whatever38            x000D   x000D   x000D   The same logic using arrow functions shorthand     This can cause issues with multiple calls see comments  The syntax of the first snippet using plain function is preferable here   x000D   x000D  new Promise  ok    gt     ok            myFunc1 param1  param2            then      gt          myFunc1 succeed            Launch something else            Only ONE call or statment can be made inside arrow functions            For example  using console log here will break everything            myFunc2 whateverparam1  otherparam           then      gt          myFunc2 succeed            Launch something else            Only ONE call or statment can be made inside arrow functions            For example  using console log here will break everything            myFunc3 whatever38           x000D   x000D   x000D

[javascript] What does the function then() mean in JavaScript?

Examples related to javascript